웹 개발 (28) 썸네일형 리스트형 손 쉽게 웹페이지 꾸미는 법 #2 - 그리드 시스템 BootStrap #1 에서 코드 몇 줄 만 붙여넣으면 BootStrap에서 제공하는 수많은 스타일들을 사용할 수 있다는 것을 확인했다. 이제 BootStrap을 이용해서 웹 페이지의 어느 정도 틀을 잡을 수 있는 방법을 정리해보자. BootStrap은 반응형 웹사이트도 제공할 수 있고 전체 길이를 12로 본다. 6이면 웹 사이트의 절반 길이인 것이다. BootStrap의 Layout 탭에서 Grid를 눌러보자 웹 사이트는 사실 행과 열로 구성되어 있다. 메뉴바든, 메인 페이지든 넓고 작은 크기의 행과 열들이 모여서 만들어내는 것이다. "row" 와 "col" class 로 간단히 Column 을 구성할 수 있다. 일단 테스트를 해보기 위해 만들어놓은 메인 페이지에 카드를 하나 추가해뒀다. 저장하고 실행하니 카드가 하나 .. [5주차] 게시판 구현 #1 - 게시판 리스트 만들기 이번엔 여태까지 만든 페이지에서 게시판을 구현해볼 것이다 우선, board.php를 만들어준다. 게시판에서 사용될 컬럼을 미리 만들어두었다 자동으로 증가하는 auto_increment 속성을 가진 number 컬럼 제목이 저장될 title 컬럼 내용이 저장될 content 컬럼 작성자의 닉네임이 저장될 name 컬럼 글 작성시간이 저장될 date 컬럼 조회수가 저장될 hit 컬럼 추천수가 저장될 thumbup 컬럼 그다음 비밀번호가 저장될 password 컬럼이다. 우선, board라는 이름의 테이블을 생성한다. 터미널을 열고 mysql 코드를 입력해주자. CREATE table board ( number int not null auto_increment primary key, title varchar(.. 손 쉽게 웹페이지 꾸미는 법 #1 - Bootstrap 적용하는 법, 버튼 디자인 웹 페이지를 HTML로 실컷 만들어놓으면 기능은 문제가 없을지 몰라도 하나의 산이 더 존재한다. 바로 css로 꾸미기..... 아니 꾸미는 거 젬병인데 컴퓨터에서도 꾸며야한다고? 근데 css 안쓰기에는 기본 html 골격 자체가 너무 날것이다 이런 개발자들에게도 희망은 있다. 바로 BootStrap 이라는 사이트인데, 구글에 검색해서 쉽게 접속할 수 있다. getbootstrap.com 이라는 곳 누르면 접속이 된다. https://getbootstrap.com/ Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and com.. [3주차] 회원가입 페이지 구현 #2 - 아이디 중복 체크 여태까지 만들어놨던 로그인 창이다. 여기에 회원가입 버튼을 만들어 회원가입 기능을 구현해볼 것이다. login_proc.php로 보내는 로그인 부분과는 별도로 새로운 form 태그를 열어준다. 그리고 그 form 태그는 enroll.php로 데이터를 POST형식으로 전송한다. test.php test.php 코드 저장하고 브라우저를 보면 회원가입 버튼이 생긴 것을 볼 수 있다. 회원가입 버튼이 빨간 건 test.css파일을 생성해서 input 버튼에 부여한 enroll id에 css코드를 입력해서 그렇다. 코드는 다음과 같다. test.css #enroll { color : red; } 회원가입 버튼을 누르면 회원가입 페이지 (enroll.php)로 이동한다. 현재까지는 주소 검색 기능이 없고 중복체크 .. [4주차] 회원가입 페이지 구현 #1 - 주소 검색 기능 만들기 회원 가입 페이지 란에 주소 검색 기능을 추가할 것입니다 우체국 사이트로 접속해줍니다. 구글에 우체국 사이트를 검색했을 때 통합검색 우편번호 란을 클릭하면 바로 들어갈 것 같습니다. 우편 번호 내려받기 탭에 지역별 주소 DB 파일을 제공하고 있습니다. 다운받아줍니다. 다운은 금방 완료되고, 지역별로 주소가 모인 txt 파일이 압축파일로 다 담겨있습니다. 이번에 서울시를 기준으로 구현해볼 예정이므로 서울특별시.txt 파일만 클릭해서 압축을 풀어줍니다. 한번 클릭해서 보니 어지럽습니다. 너무 많네요 여는 것도 시간이 꽤 걸립니다 window에서 되는지를 테스트해본 것이므로, 이 파일을 ubuntu로 옮겨줍니다. 그리고 경험상 이름이 한글인 것도 문제가 될 수 있기 때문에 1.txt로 바꿔줍니다. 그리고 my.. [3주차] 가능한 로그인 로직 연구 - 식별과 인증 식별 사용자가 본인의 신원정보를 밝히고 확인하는 행위 ( ID ) 인증 (Authentication) 보호된 리소스에 접근하는 것을 허용하기 이전에 등록된 유저의 신원을 입증 (validating)하는 과정 --------------------------------------------------------------------------------------------------------------------------------------------- 우선, 로그인에 관해 배울 때 처음 보게되는 ID = 'BOKYU' and PWD = '1111' 같은 지정형 로그인 로직은 패스하도록 하자 너무 간단하기도 하고 사실 분석할 건덕지가 없으니..! 1 ) 식별 / 인증 동시 SELECT * FROM u.. [2주차] 로그인 구현 #2 - 세션을 이용한 PHP 로그인 기능 구현 https://seahippocampus.tistory.com/13 [2주차] 로그인 기능 구현 / 메인 페이지 /로그아웃 기능 구현 로그인 기능을 구현해놓은 결과만 있는 것이 아니라 여러 시행착오와 과정들에서 보완점과 느낀점이 함께 적혀있습니다 읽을 때 고려해주세요! ------------------------------------------------------- 로그 seahippocampus.tistory.com 저번에는 조건문같은 기본적인 코드의 구조를 통해 GET 방식으로 페이지를 옮겨가면서 로그인을 만들었지만, 쿠키나 세션 등을 전혀 이용하지 않았다 그래서 이번에 세션을 이용한 PHP 로그인 기능을 구현해 보려고 한다 세션에 관한 정보는 https://teserre.tistory.com/8 .. [2주차] 로그인 구현 #1 - 메인 페이지 /로그아웃 기능 구현 로그인 기능을 구현해놓은 결과만 있는 것이 아니라 여러 시행착오와 과정들에서 보완점과 느낀점이 함께 적혀있습니다 읽을 때 고려해주세요! ------------------------------------------------------- 로그인 기능을 구현해볼 것이다 디자인 같은 건 일단 논외로 하고, 지정된 아이디와 비밀번호가 아니면 메인페이지로 들어갈 수 없는 페이지를 만들려고 했다 그리고 만약 틀린 아이디를 입력했을 경우는 다른 창으로 넘어가는 게 아닌 로그인 페이지에 그대로 머물렀으면 했다 처음은 간단하게 form 태그를 이용해서 get 방식으로 id와 password를 logincheck.php로 보내는 코드로만 페이지를 구성했다. login.php 2주차 로그인 기능 구현 과제 loginchec.. 이전 1 2 3 4 다음
