네 로말입니다.
오늘은 사이트의 기본적인 기능 및 디자인을 넣어보려고합니다.
오늘 넣을것은 DB(데이터베이스) 기초작업,부트스트랩을 이용한 기본 디자인을 해보도록하겠습니다.
일단 a.rb 라는 파일을 만들어주세요.
그리고 a.rb 파일안에 이렇게 써주세요.
class user는 DB를 하나만들어주는겁니다.
property :id, Serial 는 user라는 DB에 자신만의 고유 id입니다.
이 id 로 user 삭제,수정 등등이 가능합니다.
한마디로 필수.
property :DB에 넣고싶은것들 이름, text,string,integer,bollien,Seirial,data
여기 text,data 까지 모르시는분들이 계실겁니다.
루비,프로그래밍 용어들을 설명해놨습니다.
프로그래밍을 배우기전 기초적으로 알아야할 용어들 ~~!!!!!!!!! : 여기
루비 언어 기초 문법들 한번에 알기 출력 부터 해쉬 까지 !!!!!!!!!!!! : 여기
HTML 기본을 한번에 알아보기!!!!! : 여기
부트스트랩이라는 사이트가있습니다.
트위터에서 만든걸로 프로그래머인데 디자인을 할줄모르거나, 뭐 그런사람들을 위해 만든겁니다.
월래 CSS 라는것이 디자인할때 쓰는데 내마음대로잘안되거든요.
만들어도 시간도많이걸리는데 여기선 만들어져있으니까.
가져다 쓰기만하시면됩니다.
사이트는 여기입니다.
들어가신후 화살표를 클릭해주시고.
a.rb 파일이있는폴더에 views 라는 폴더를 만들어주시고 그안에 navbar.erb 파일을 만들어주세요.
<!DOCTYPE html> <html> <head> ★이곳에 ctrl + v 를눌러주세요.★
<title><title> </head> <body> </body> </html>
그리고 위와같이만들고 ★★ 이건빼주세요.
방금 복사한것을 넣어주세요.
그다음 Components 메뉴에 들어가셔서 화살표(navbar) 를 클릭해주세요.
클릭하신후 조금만 더 내리시면 위와같이뜨는데. 화살표를 클릭해주세요.
<!DOCTYPE html> <html> <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<title><title> </head> <body> ★이곳에 ctrl + v 를해주세요.★ </body> </html>
복사한것을 ★★ 을 뺴주시고 붙여넣기해주세요..
그리고 navbar.erb 만든 폴더에 index.erb 라는 파일을 만들어주세요..
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <%= erb :navbar%> <p>index 페이지 입니다.</p> </body> </html>
그 index.erb 에는 이렇게 써주세요.
코드설명을 드리겠습니다.
<%=%>, <%%> 이것이 뭔지 모르실겁니다.. erb 파일에서 루비코드를 작성할시에는 <%%> 를 무조껀써주셔야됩니다.
<%%> 일떄는 연산,처리,변수선언,불러오기등등 입니다.
<%=%> 변수출력,불러와서 출력입니다.
그러면 erb :navbar 이것은 같은 폴더에 있는 navbar.erb 파일을 불러오겠단 소리입니다. erb:navbar 하시는거랑 다르게됩니다.
쓰다보시면 아마 이해가되실겁니다.
저는 navbar 를 살짝바꿔서
<nav class="navbar navbar-default" role="navigation">
이부분 navbar navbar-default 를 navbar navbar-inverse 로바꿔주시면 검정색 테마로 변경됨
이렇게 에서
이렇게 변합니다.
<div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="아이디"> <input type="text" class="form-control" placeholder="비밀번호"> </div> <button type="submit" class="btn btn-default">로그인</button> </form> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>
아까 복사한 코드와 비교하시면서 공부하시면될것같습니다.
이강좌는 아마 매주 금요일~일요일에 업데이트 될 예정입니다.
원래는 레일즈로 하려했는데.. 초보자들이 접하기 너무어려워서.
시나트라를 가르쳐드리고 레일즈로 넘어가기로 하겠습니다.
영상도 올릴껀데..
영상이 약간 더 어려운것같습니다.
영상 올리면 더 쉽게 이해가능하시니..
영상보시고 이글 보시면 될것같습니다.
모르실분있으실껏같아서.. 파일올리도록하겠습니다.
잘못 따라 오시는분들은 이거보시면서 공부해주세요.
모르시는분들은 댓글달아주시고..
공감 눌러주세요.!!!
글 봐주셔서 감사합니다.
로말이였습니다.
lomal_blog_01.zip'프로그래밍 > RUBY' 카테고리의 다른 글
| 루비,시나트라를 이용해 만든 문제 풀이 웹사이트. (3) | 2014.12.06 |
|---|---|
| [루비,시나트라,웹]IP 차단 시스템을 만들어 보자 !!!!!!! (0) | 2014.11.02 |
| 루비 언어 기초 문법들 한번에 알기 출력 부터 해쉬 까지 !!!!!!!!!!!! (4) | 2014.08.30 |
| 루비(Ruby),시나트라(Sinatra) 개발 환경 구축 하기 !!!!!! (2) | 2014.08.18 |
| 루비(Ruby) 프로그래밍 언어란????? (2) | 2014.07.22 |
