3 : 作作看簡單的網站

上章:Ruby on Rails 的基礎

Header3

0 : 這個章的目的

 學習用HTML・Ruby on Rails作網站的方法、用Rails作作看網站。
到這裡,作好了 Ruby on Rails 的環境,
咱們用Ruby on Rails作網路吧!

・・・想現在就開始作網站,但是開始作網站之前先解釋顯示網頁的時候需要的知識

 在這裡想問一個問題。什麼東西在顯示網站呢?

第1章也有解釋過了,叫做HTML文件的文件在決定這麼樣顯示網頁。 Fb code 這個是Facebook主頁很長的HTML文件。這個文件在決定這麼顯示網頁。

雖然Facebook主頁的HTML文件很長,但是更簡單的網頁的話可以更簡單的作。
咱們先用HTML,作作看網頁吧!


1 : HTML的基礎

 ① : 用HTML作網頁


事先,用Finder在Desktop裡作「rails_project」的名字的文件夾。


 用 Windows 的話參考這裡

 完了之後從這裡看下一個內容。



 從現在起,新做的文件跟文件夾就保存在rails_project裡。 Finder mkdir rails project
用上章安裝的Sublime Text,作HTML文件。
※ 如果不知道地方的話,按右上邊放大鏡的標記,打入「Sublime Text」找找看。

在這裡使用Sublime Text編輯HTML文件跟Ruby on Rails的設定文件等等,可以把網站設定的自己喜歡的樣子


 如果使用Windows 的話,參考這裡
保存叫做「sample.html」的HTML文件在「rails_project」文件夾。

 完了之後、從這邊看下一個內容。


Sublime text new window 打開了下面一樣的圖像嗎? Window sublime text 如果打開了的話,按「File > Save」Sublime text save 畫面出來之後、像下面一樣子保存文件。 Sublime text save after 從Finder的rails_project文件夾上確認的話,可以看到作好的sample.html文件。 Finder sample html

在剛才保存的「sample.html」上,打入下面的內容。(左邊的數字是行數,不用管。)

設定的時候,漢文以外的地方請用半母字母數字打入
 sample.html(用半母字母數字打入)
※ 如果嫌麻煩,可以用複製跟黏貼。
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>你好</p>
</body>
</html>
Sublime text sample html1 打入完了之後,一起按「Command」跟「s」
這樣可以保存文件的內容。



 使用Windows的話,一起按「ctrl」跟「s」。這樣可以保存文件的內容。



用Finder開rails_project的文件夾,之後參考下面的圖像打開看看吧。 Window open with chrome 顯示像下面的畫面嗎? Chrome sample html
因該顯示「你好」
雖然打入很長的內容,顯示的只是這樣的話有一點傷心哦...

其實說顯示畫面的只是「<body>」跟「</body>」圍起來的「<p>你好</p>」的部分而已。

 sample.html(用半母字母數字打入)
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>你好</p>
</body>
</html>

畫面上顯示<p>」跟「</p>」圍起來的地方
  • <p>的話,普通大小的文字
  • <h1>的話,大的文字
  • <h2>的話,有一點大的文字
  • <h3>的話,中的文字
  • <img>的話,顯示圖像
  • <br>的話,改行
等等很多顯示的方法。
 在「<body>」跟「</body>」圍起來的地方,打入網站上顯示的文章跟圖像。

 sample.html文件上,用<h1>顯示內容!
如果關掉文件的話,參考打開文件的方法

※ 設定完了之後,一起按「Command」跟「s」保存文件的內容。
 使用Windows的話,一起按「ctrl」跟「s」保存文件的內容


 ② : 裝飾網頁


到這裡解釋了網頁的顯示的方法。
可是這個網頁不好看,讓您有一點失望。

這個也當然。
HTML只在顯示文章圖畫等等的資料。這麼樣顯示網頁要用別的設定文件。
這個文件叫做CSS文件

那麽咱們作CSS文件,裝飾看網頁吧!
事先,「rails_project」的文件夾裡保存「style.css」的名字的文件。
※ 用「style.css」這個名字的理由,只是很多人用這個名字而已。沒有大的意思。
※ 如果不知道這麼保存,請參考這裡
 用Windows的保存,請參考這裡


像下面一樣顯示了嗎? Window style css 在Finder的「rails_project」文件夾上有style.css跟sample.html,這個兩個文件嗎? Finder rails project 文件保存之後,打入內容。
※ 打開文件的方法請參考這裡
 style.css(用半母字母數字打入)
1
2
3
h1{
color:red;
}
Sublime text style css  sample.html(改第5,8行/用半母字母數字打入)
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<h1>你好</h1>
</body>
</html>

內容改了之後,一起點擊「Command」跟「s」保存文件。


 使用Windows的話,一起點擊「ctrl」跟「s」保存內容



內容改了之後,參考下面的圖像打開「sample.html」。 Window open with chrome 顯示下面圖像一樣嗎? Chrome sample html2 文字變成紅色了嗎?這個還是簡單的設定。我們用CSS文件設定這樣子的裝飾。
那麽,解釋改變的內容。
先解釋改變的html文件

 sample.html
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<h1>你好</h1>
</body>
</html>

在這個一行設定,在這個網頁上使用「style.css」的名字的CSS文件。
裡面應該可以看到「style.css」。在這裡指定要用的CSS文件。使用的時候除了CSS文件以外的地方都可以用一樣的寫法。這個設定要加在<head></head>圍起來的地方設定
比如說要指定名字叫「style2.css」的CSS文件的話,

1
<link rel="stylesheet" href="style2.css" type="text/css" />

<head></head>之間,加上面的內容。

用CSS文件的時候,請不要忘記在<head></head>之間追加這個一行。
那麽,解釋做裝飾的CSS文件

 style.css
1
2
3
h1{
color:red;
}

做裝飾的CSS文件是,
想裝飾的地方的名字{
  裝飾的方法
}
這麼樣設定。
顏色的設定是
color:顏色的名字;
這樣子設定。

這個時候,

1
<h1>你好</h1>

的一行在指定<h1>跟</h1>之間,要改成紅色。

 那麽用別的顏色看看好了!

 style.css(用半母字母數字打入)
※ 內容打完之後,一起點擊「Command」跟「s」保存內容。
 使用Windows的話,一起點擊「ctrl」跟「s」保存內容。
1
2
3
h1{
color:blue;
}

完了之後,請重新載入網頁。內容變了嗎?
※ 用瀏覽器打開網頁的方法請參考這裡
到這邊解釋了顏色的裝飾,但是裝飾的方法不只是這個而已。
還有換文字大小的裝飾設定,換背景色的裝飾的方法等等。參考下面的內容,改設定。

 style.css(用半母字母數字打入)
※ 一起點擊「Command」跟「s」保存內容。
 使用Windows的話、一起點擊「ctrl」跟「s」保存內容。
1
2
3
4

5
h1{
color:blue;
font-size:50px;
background-color:yellow;
}

完了之後,請重新載入網頁。顯示像下面的圖像的內容嗎?
※ 用瀏覽器打開網頁的方法請參考這裡 Chrome sample html3 文字的大小用
font-size:文字的大小px;
這樣設定。

px是電腦裡的大小單位

背景色的設定是
background-color:顏色;

裝飾還有很多種,如果有興趣的話自己查查看吧。

到這邊,解釋了裝飾網頁的方法。

現在的方法也可以裝飾,但是<h1>只能顯示顏色是藍色/文字的大小是50px/背景色是黃色的文字。
這樣也可以裝飾,可是不能有很多種裝飾。

所以CSS文件可以取装飾的名字、然後用這個名字在html文件裡裝飾。
那麽作作看吧!

打開「rails_projects」文件夾裡的「sample.html」跟「style.css」
※ 打開文件夾的方法請參考這裡

 sample.html(用半母字母數字打入)
※ 一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,一起點擊「ctrl」跟「s」
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<h1>你好</h1>
<h1 class="title">晚安</h1>
</body>
</html>

 style.css(用半母字母數字打入)
※ 一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,一起點擊「ctrl」跟「s」
1
2
3
4

5
.title{
color:white;
font-size:30px;
background-color:black;
}


完了之後,請重新載入網頁。顯示像下面的圖像的內容嗎?
※ 用瀏覽器打開網頁的方法請參考這裡 Chrome sample html4 上面的畫面是沒有裝飾的<h1>、下面的畫面是設定裝飾的<h1>
CSS文件內打入
.名字{
  装飾的內容
}
可以用一個名字做幾個裝飾
這次的名字是title,但是名字可以自己自由選擇。

在html文件裡的顯示是,在<h1>或者<p>等等裡面
class="名前"
設定。這裡不要用「.」。
這裡的名字跟在CSS文件裡設定的名字是一樣的時候,裝飾會適用。

 改變沒有装飾的<h1>跟CSS文件,作作看裝飾吧!
※ 不要忘記打入用半母字母數字,一起點擊「Command」跟「s」保存內容。
 使用Windows的話,一起點擊「ctrl」跟「s」保存內容。


 ③ : 總結


網頁是,用顯示文字跟畫面的html文件跟裝飾的CSS文件作。
  • html文件的話,基本上是<body></body>的內容
  • CSS的話,用{}圍起來的地方
設定,網頁跟裝飾。


2 : 用Rails作作看網站

到這邊,我們解釋用html跟CSS顯示網頁的方法

網頁顯示的方法基本上是這樣。更詳細的方法,過一會兒會解釋。
從這裡,開始用Ruby on Rails作網站吧。
從這裡作的網頁是,基礎編裡作的這樣子的網站

Ruby on Rails是,事先作好的網站上設定裡面的詳細作網站。
在這個章做做看,用Ruby on Rails作剛開始的網站之後,開開看這個網站!
Ruby on Rails是用在上章使用的terminal,作剛開始的網站。
點擊右上邊放大鏡,搜索「terminal」打開terminal。
 使用Windows的話,使用「Cortana」或者「搜索框」搜索「命令提示符」吧

 從這邊是複習。事先在terminal上,移動到desktop的位置。
※ 不知道這麼移動的話,參考這裡


 使用Windows移動的方法,請參考這裡



移動到desktop的話,

terminal
 使用Windows的話、請使用「命令提示符」
1 cd rails_project

打入移動到「rails_project」吧。
※ 用半母之母數字打入


 ① : rails new


那麽,用Rails作作看剛開始的網站吧!
打入下面的命令吧!

Terminal(用半母字母數字打入)
1 rails new myapp -d mysql

 使用Windows的話,打入下面的命令。

 命令提示符(用半母之母數字打入)
1 rails new myapp

Rails new myapp 2 顯示像下面的畫面之後... Rails new myapp after 最後顯示這樣子的畫面了嗎?
這樣,剛開始的簡單的網站作好了!

做完的話,用Finder看看作好的「myapp」吧。 Finder myapp 「rails_project」裡,找到myapp的名字的文件夾嗎?

編輯這個「myapp」裡的設定文件,設定自己的網站。
那麽,剛才的

terminal
1 rails new 網站的名字 -d mysql

在做什麼呢?

這個是,
「用MySQL的資料庫(-d mysql)作myapp的網站吧!(rails new myapp)」
的電腦的命令。


 使用Windows的話,後面不用加「-d mysql」就可以設定使用「Sqlite」的資料庫。


剛開始作網站的時候,打入

 terminal(用半母之母數字打入)
1 rails new 網頁的名字 -d mysql


 使用Windows的話、請打入下面的內容。

打入下面的命令。

 命令提示符(用半母之母數字打入)
1 rails new 網頁的名字

 剛開始作網站的時候、用Terminal(或者命令提示符)打入「rails new 網站的名字 -d mysql」。


 ② : 網站的各種設定


到這裡,打入

 terminal
1 rails new 網站的名字 -d mysql

 命令提示符
1 rails new 網站的名字

作剛開始的網站。
可是,這樣網站的設定還沒完成。
terminal(或者命令提示符)上,還必須做幾個設定。

剩下的設定是
  • 為了作網站的時候需要用的工具的導入跟設定
  • 準備資料庫
的兩個。

 在這裡完成這個設定吧。


 ⑴ : 工具的設定跟導入

Rails on Rails上、使用在網路上公開的作網站的工具(叫做「gem」)作網站。

使用這些工具,可以作比如說用戶管理或者圖像的保存等等的機能。

 在這裡做做看這個gem的設定跟導入。
事先用Sublime Text,打開剛才作的「myapp」吧。
※ 打開文件跟文件夾的方法,請參考這裡
 用Windows打開文件跟文件夾的方法請參考這裡


有出現下面一樣的畫面嗎? Window sublime text myapp 畫面出來了後,打開「Gemfile」的文件。 顯示下面一樣的內容的話,OK! Sublime text open gemfile 用這個Gemfile」的文件,設定工具的設定。
應為剛開始已經設定好了需要的工具,所以文件裡已經有內容。

看裡面,會看到「gem '〜'」或者「gem '〜','〜'」樣子的文字。

如果想用工具的話,在「Gemfile」裡加上
gem '工具的名字'
的設定。(需要的話,加上「, '版本'」)
到這裡解釋了設定工具的「Gemfile」文件。

這樣設定是完了。但是工具的設定還沒做好。還沒做好導入、所以還不能使用工具。

 在這邊,導入工具的設定。
工具的設定是編輯「Gemfile」的內容。但是工具的導入是用terminal(或者命令提示符)做。

首先,打開terminal(不知道的話,請參考這裡)、移動到「rails_project」。

 用Windows移動到「rails_projects」的方法,請參考這裡


 terminal
 使用Windows的話,請使用「命令提示符」。
1 2 cd Desktop cd rails_project

到這邊、移動到剛才作的「myapp」。

terminal
 使用Windows的話,請使用「命令提示符」。
1 cd myapp

Terminal cd myapp 那麽,導入工具吧!請打入下面的文字。
※ 用半母字母數字打入。

terminal
 使用Windows的話,使用「命令提示符」
1 bundle install

 不會動的話,先刪除在同樣文件夾裡的Gemfile.lock之後再試一次。 Terminal bundle install after 打入之後,有沒有顯示這樣的畫面呢?
注意看、可以看到設定文件裡的工具。

在「Gemfile」上加設定之後、在terminal上打入「bundle install」。

這樣工具的導入完成了。
※ 在這邊是說工具、正確的是「gem」。


 使用 Windows的話,請作這裡操作



 工具的設定是編輯「Gemfile」文件的內容,工具的導入是用terminal打入「bundle install」。


 ⑵ : 資料庫的準備

到這邊,我們解釋設定Rails上的工具(gem)的方法跟導入的方法。
可是設定還有一個。那個是資料庫的準備

在這裡作,網站上保存資料的資料庫的設定。
這個一下子就可以完成。開始吧!
事先,用terminal移動到「myapp」吧。
※ 如果不知道的話、參考這裡

完了之後,打入下面的命令。

terminal
 使用Windows的話,請使用「命令提示符」。
1 rake db:create

 如果不動的話、在前面加bundle exec,打入bundle exec rake db:create Terminal rake db create 這樣資料庫(空的Excel表)的準備好了!
這樣是有一點傷心、看看真的資料庫作好了沒。
用在上章安裝的「Sequel Pro」,看看資料庫!


  使用Windows的話,會使用SqliteBrowser的資料庫。
 參考這裡打開「db > development.sqlite3

 完了之後點擊這裡看下一個內容。


首先用右上邊的放大鏡打入「Sequel Pro」之後打開「Sequel Pro」!
打開之後,按着下面的圖畫點擊「Connect」。 Sequel pro 顯示下面一樣的畫面嗎? Sequel pro main page 做好了的話,選擇左上邊的「Choose Database」。 Sequel pro choose database 出來的列表框裡有「myapp_development」嗎?
這個是在網站上保存資料的資料庫。
※ 「網頁的名字_development」是資料庫的名字。 Sequel pro select myapp 這樣就OK了!。
 資料庫是打入「rake db:create」可以作。


 ⑶ : 總結


打入
  • 在terminal上,「rails new 網頁的名字 -d mysql
  • 在命令提示符上,「rails new 網頁的名字
作完網頁之後...
要做
  • 工具(gem)的設定跟導入
  •  terminal打入「bundle install」,可以導入工具(gem)。

     使用Windows的話,請作這裡的操作


  • 資料庫的準備
  •  打入「rake db:create」可以作資料庫。


 ③ : 打開網站


這樣子剛開始的網站是完成了,但是還不知道網站真的是有作好了沒。
那麽,咱們開開看做好的網站!
事先用terminal移動到「myapp」
※ 不知道的話、請參考這裡

 使用Windows的話、請參考這邊


完了之後,請打入下面的命令。

terminal(用半母之母數字打入)
1 rails s

顯示像下面的畫面嗎? Terminal rails s 這個「rails s」的命令,起動在電腦裡的顯示網頁跟保存資料的機器(服務器)
※ 現在起動的服務器是在電腦裡動的東西、所以網站只能在自己的電腦裡看。
這樣子,可以顯示網站了!
用瀏覽器,打開看看0.0.0.0:3000


 使用Windows的話,打開localhost:3000


Chrome localhost1 顯示這樣子的網頁了嗎?這個是用 Ruby on Rails 上做的網站。
以後用Ruby on Rails作的網站、從0.0.0.0:3000開。


 使用Windows的話、打開localhost:3000



那麽停止,用「rails s」動的服務器吧。
打入了「rails s」的terminal的畫面上、請一起打入「Command」跟「c」吧。

 使用Windows的話、一起打入「ctrl」跟「c」


Terminal rails s finish 這樣子停止在顯示網頁保存資料的服務器了。
再一次打開看看0.0.0.0:3000吧。


 使用Windows的話,打開看看localhost:3000


這一次沒有打開服務器,所以網站應該不會打開
不用用Rails on Rails打開網站的話、一起點擊「Command」跟「c」關掉服務器。沒有關掉的話,電源會白費。


 使用Windows的話,一起點擊「ctrl」跟「c」



 設定完的網站、在terminal上打入「rails s」的狀態,打開「0.0.0.0:3000」就可以在瀏覽器上看。


 使用Windows的話、打開localhost:3000



3 : 這個章的總結

在這個章學了
  • 顯示網頁的設定文件html跟裝飾的設定文件CSS
  • 使用Rails作剛開始的網站的方法跟打開的方法
在這裡做簡簡單單的總結。
⑴ html跟CSS

html是在設定網頁顯示的文件。這個文件在Ruby on Rails上做網頁的時候也會用。
設定的方法差不多是下面的樣子。

 sample.html(用半母字母數字打入)
※ 使用CSS的話,加上5行
1 2 3 4 5 6 7 8 9 10 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="要使用的CSS文件的名字" type="text/css" /> </head> <body> <p>内容</p> </body> </html>

CSS是裝飾html文件的文件,用Ruby on Rails的時候這個也需要。
設定的方法差不多是下面的樣子。

 style.css(用半母字母數字打入)
1 2 3 4 5 .title{ color:white; font-size:30px; background-color:black; }

⑵ 用Rails作網站的方法

用Ruby on Rails 做網站的話,要用terminal做。
事先作剛開始的網站,

 terminal
1 rails new 網頁的名字 -d mysql

 使用Windows的話,打入

 命令提示符
1 rails new 網頁的名字

之後,打入

 terminal
1 cd 網頁的名字

移動到做好的網頁之後,做Rails上使用的工具・gem的導入

 terminal
1 bundle install

之後準備資料庫

 terminal
1 rake db:create

這樣子網站的設定完成了。打開網站的時候要打入

terminal
1 rails s

起動顯示網頁保存資料的服務器。
如果服務器在動的話、可以打開0.0.0.0:3000看網站。


 使用Windows的話、打開localhost:3000



要關服務器的話,在terminal上一起點擊「Command」跟「c」
如果吧服務器一直開着的話、會白費電源。


 使用Windows的話、一起點擊「ctrl」跟「c」



 到這裡,解釋好了用Ruby on Rails作網站的方法。
  下章,咱們學習網站上面保存資料的方法。