2011年11月15日

[209] 史上最強大CMS ~ Drupal的初體驗

世界光棍日@臺北教育大學 公誠樓

2011-11-11 11:11:11 XD ~

講師:林裕勝 (ethan)

記錄:周士玉(瘋浪客)(macoto)

http://www.facebook.com/ecesinfo

 

Drupal Demo網站 :

 

教育噗浪客官網

http://tpet.ntct.edu.tw/

台中市華龍國小 (阿欣的學校)

http://www.hlps.tc.edu.tw/

 

本次上課的簡報(prezi) (感謝講師ethan提供連結)

http://prezi.com/qamab7mk_rhm/cms-drupal/

網路上搜集 Drupal 教學的連結

南投鄭明彰老師(不老師)的Drupal線上講義

http://mis.ntct.edu.tw/book/420

南投鄭明彰老師(不老師)的Drupal線上講義

(專有名詞相關介紹)

http://mis.ntct.edu.tw/book/423

Drupal 架站 (這個網站講解的非常詳細 ~還有影音教學 讚啦)

http://163.30.191.22/kf/C001/drupal.html

Benjr.tw:Ubuntu 11.04 + drupal 7

http://benjr.tw/node/697

Drupal Taiwan:模組介紹

http://drupaltaiwan.org/module

drupal 問題整理

http://www.wretch.cc/blog/ntnujean/7862243

drupal 名人 花水木 (玩樂團的Drupal辣妹)

http://hanamizuki.tw/

Drupal video 教學網站:buildamodule.com (00086推薦)

:Over 520 focused Drupal video tutorials! Over 520 focused Drupal video tutorials!

http://buildamodule.com/

 

 

JOE Tsulp's Drupal 教學(00086推薦)

http://www.joetsuihk.com/drupal

 

阿舍的 Drupal 架站經驗談(00086推薦)

http://drupal.soa.tw/

Drupal 7.x 使用文件 - 把書籍放在網路上,真是太佛心了(感謝 00086推薦)

http://www.drinkingdrupal.com/

開始安裝 Drupal 7 就中文化的過程! Drupal 7 安裝時中文化顯示(00086推薦)

http://fa4551.cixx6.com/?p=12

Ubuntu & Windows 7 下裝 Drupal 7 的差異(00086推薦)

http://drupal.soa.tw/node/761

另一個Drupal 有關的教學網站! notaBlueScreen(00086推薦)

http://www.notabluescreen.com/

比較免費架站軟體-Wordpress、Joomla、Drupal、Plone(00086推薦)

http://drupaltaiwan.org/forum/20091117/3829

 

開始上課囉 ~

本次上課所採用的系統環境:

Ubuntu 11.10 + Drupal 7.9

(都是最新版的啦)

本次上課的簡報(prezi) (感謝講師ethan提供連結)

http://prezi.com/qamab7mk_rhm/cms-drupal/

 

三大CMS系統
Drupal       -----   最具彈性.....擴充性最好......最強大的CMS......
Joomla      -----   最漂亮的CMS (外觀最漂亮)....
WordPress ----    部落格系統推薦(最簡單上手)

Drupal 官網

http://drupal.org

Drupal Taiwan 正體中文支援站
Drupal最大的特色優點

可以自訂欄位

(我們可以進階自訂 Content Type的欄位)

(Basic Page只有Title、 Body兩個欄位)

強大的權限管理系統

群組的權限是透過「角色」(role) 來管理

如果想要管理好使用者,請先將使用者分配到適當的「角色」 ~

注意:Drupal並無法對個別的使用者作權限作設定 ~ 需要透過「角色」來管理

所以要熱悉Drupal的權限管理:只要先規畫好「角色」就搞定好一大半了

 

終端機(gnome-terminal)
在11.10 啟動 搜尋 關鍵字 gnome --就可以找到「終端機」了
切換到root的權限
sudo su -

更新套件庫

apt-get  update

(建議在新裝軟體時都要作--以同步本地端和遠端套件庫)

一行指令安裝LAMP
apt-get install lamp-server^ 
(^是Shift+6喔lamp-server^中間沒有空格喔)
(過程中要設定mysql的root密碼)
安裝phpmyadmin
apt-get install phpmyadmin
過程中請選擇 apache2
會要求輸入mysql的root的密碼
檢查php環境是否Okay
cd /var/www
nano test.php

<?

phpinfo();

?>

 

nano編輯器是使用 Ctrl+O 存檔 Ctrl+X離開

測試

http://localhost/test.php
新增phpmyadmin的資料庫和使用者
http://localhost/phpmyamin
權限 --- 新增新使用者
帳號 drupal
主機 本地
使用者資料庫--
建立與使用者同名的資料庫
database ---- drupal
使用者   ---- drupal
從官網下載drupal
(http://drupal.org/)
wget http://ftp.drupal.org/files/projects/drupal-7.9.tar.gz
安裝Drupal
tar zxvf /root/drupal-7.9.tar.gz -C /var/www/
cd /var/www
mv drupal-7.9 drupal
準備:新增files資料夾並給權限777
cd /var/www/drupal/sites/default
mkdir files

chmod 777 files

前面兩行其實可以用底下的一行指令達到相同目地!!

mkdir -m 0777 files
準備:建立settings.php
將範例檔複製成settings.php
cp default.settings.php settings.php
chmod 777 settings.php
用瀏覽器開始安裝
http://localhost/drupal
當安裝過程中出現警告settings.php相關的訊息
請用終端機將將這個檔案的權限改為755
chmod 755 settings.php
Refresh網頁 (應該不會有警告訊息了) ~ 繼續安裝
經過一番努力...恭喜您終於初步架好Drupal ~

 

下載Drupal 中文語系的po檔
http://localize.drupal.org/translate/languages/zh-hant
http://ftp.drupal.org/files/translations/7.x/drupal/drupal-7.9.zh-hant.po

將Drupal界面中文化

用瀏覽器開啟http://localhost/drupal

 

Modules\勾選 locale [save configuration]

Configuration / Languages  [Add language] --- Chinese Traditional
Configuration / Translate Interface --- Import
請選到剛剛下載好的po檔

Configuration / Languages 請將Chinese,Traditional 設為default  [save configuration]

有沒有很感動 ~ 熟悉滴正體中文出現了

Drupal初體驗 Basic Page

瀏覽器 http://localhost/drupal

內容 --- 新增內容 --Basic Page

Basic Page 是最基本的Content Type 只有「Title」和「Body」這兩個欄位

(適合做靜態的網頁)

練習:我們用Basic Page 來做做看 About Me 和 History 兩個靜態網頁

設定選單連結

要調整順序請設定好「權重」~

 

ps 「網址路徑設定」還需要apahe 相關設定的配合才會生效(進階班再教囉)

Drupal初體驗 Article
瀏覽器 http://localhost/drupal

 

內容 --- 新增內容 --Article

Content Type 有「Title」、「Body」和「Tag」這三個欄位

綀習:用Article 來新增一篇文章

推薦在Drupal裏使用CKEditor編輯器 

瘋浪客覺得用CKEditor 模組比用Wysiwyg模組with TinyMCE editor 順手許多 ~

實作是參考底下這篇文章 ~

http://docs.cksource.com/CKEditor_3.x/Howto/Drupal_Installation

sudo su -

cd /var/www/drupal/sites/all/modules

http://drupal.org/project/ckeditor

wget http://ftp.drupal.org/files/projects/ckeditor-7.x-1.6.tar.gz

tar zxvf ckeditor-7.x-1.6.tar.gz

cd /var/www/drupal/sites/all/modules/ckeditor/ckeditor

http://ckeditor.com/download

wget http://download.cksource.com/CKEditor/CKEditor/CKEditor%203.6.2/ckeditor_3.6.2.tar.gz

tar zxvf ckeditor_3.6.2.tar.gz

 

 

 

 

 

 

 

 

 

 

 

耶 ~ 所見即所得的編輯器 ~

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

恭喜:已經有「所見即所得」的編輯器可以用了 ~ Ya !! 

目前發現的bug:在---內容---編輯---舊文 ;編輯完  儲存 時 常發現以下的錯誤 ~ Why ??

 

 

 

 

 

 

 

 

 

 

 

 

#####Macoto stongly suggest use  CKEditor Module rather than  Wysiwyg Module with TinyMCE Editor #####

 

強烈推薦使用CKEditor模組

Wysiwyg 模組 with TinyMCE 的安裝過程 就當參考就好 ~

為Drupal安裝tinymce
下載 tinymce_3.4.7.zip 到個人家目錄(例如我的家目錄是 macoto)

cd /var/www/drupal/sites/all/

mkdir  libraries
cd libraries
cp /home/macoto/tinymce_3.4.7.zip .
unzip tinymce_3.4.7.zip

安裝模組:Wysiwyg 

ethan 說Wysiwyg模組是比較複雜的模組

會裝這個模組的話 ~ 安裝其它模組就沒問題囉.....

到官網下載 Wysiwyg

Module搜尋Wysiwyg

安裝Wysiwyg模組
cd /var/www/drupal/sites/all/modules
wget http://ftp.drupal.org/files/projects/wysiwyg-7.x-2.1.tar.gz
tar zxvf wysiwyg-7.x-2.1.tar.gz

用瀏覽器 http://localhost/drupal

模組 ---》 wysiwyg 啟用 ---設置 -- Editor -->TinyMCE 3.4.7

 

Full HTML 編輯  (Filtered HTML、Plain text 也都是用一樣的方法)

 

 

 

 

 

 

 

 

 

 

Buttons AND PLUGINS -- 建議全選(要一個一個核取 -- 很麻煩!!)

 

儲存

 

TinyMCE 在沒有裝 IMCE Wysiwyg bridge 之前,圖片不能正常秀出!!所以瘋浪客還是比較推薦 CKEditor

##### Macoto stongly suggest use  CKEditor Module rather than  Wysiwyg Module with TinyMCE Editor  ##### 

外觀--佈景主題的更換
http://drupal.org/project/themes
cd /var/www/drupal/sites/all/themes/
wget http://ftp.drupal.org/files/projects/bluemasters-7.x-1.2.zip
unzip bluemasters-7.x-1.2.zip
用瀏覽器 http://localhost/drupal

 

外觀 --- 將剛剛新裝好的佈景主題 「啟用並設為預設」

ethan 叮嚀:Drupal的Themes不只是為了「好看」而已

不一樣的Themes 往往有不一樣的功能和目的 ~

建議大家可以看看各個佈景主題的Readme ,才可以更充份的「掌控」這些Themes的功用喔!!

濱崎步通通00086推薦「Marineli」佈景主題 (超美的Theme)

http://drupal.org/project/marinelli

cd /var/www/drupal/sites/all/themes/

wget http://ftp.drupal.org/files/projects/marinelli-7.x-3.0-beta11.tar.gz

tar zxvf marinelli-7.x-3.0-beta11.tar.gz

外觀 --- 選到該版型 -- 啟用並設為預設

今天的講師 ethan 的學校「臺北市濱江國小」的校務評鑑,也是用這個佈景主題做滴 !!

 

啟用三大內建的模組

[請啟用] Aggregator、Blog、Book

Aggregator模組: 簡單講就是 RSS 收集器的模組 ~ (感謝chiwen老師的提醒)

Blog 模組:顧名思義 ~

Book模組:讓您建立的內容可以像書目結構般有系統地呈現 ~ (作評鑑網站時很好用喔!!)

模組安裝4步曲
a.下載 b.解壓縮 c.啟用 d.設定
RSS的使用(聚合訊息)
設定   RSS 聯播

 

綀習:將自己部落格的RSS feed 進來

一些關鍵的詞

Content Type vs Node
Content Type:Basic page

Content Type:Aticle

Content Type: Book

CKEditor

Wysiwyg and tinymce

IMCE

Core

Modules

Themes vs Region vs Block

Comment

User and Role

RSS

Taxonomy and Term (進階課程再教囉 ~)

Taxonomy  Access

Context

CCK

http://www.joetsuihk.com/cck

Views (進階課程再教囉 ~)

 

Views 模組 - 建立一個條列式清單 ( 上 )

http://drupal.soa.tw/views_tutorial_part1

Views 模組 - 建立一個條列式清單 ( 中 )

http://drupal.soa.tw/views_tutorial_part2

Views 模組 - 建立一個條列式清單 ( 下 )

http://drupal.soa.tw/views_tutorial_part3

 

 

Panels

 

權限的設定 (Drupal的強項之一)
要針對角色(Role)來設權限

Drupal中權限是要針對「角色」來設定滴

(注意:無法直接對使用者設定喔)

要記得先將使用者加到「角色」中喔~

所以權限管理:只要先規畫好「角色」就搞定好一大半了

 

 

 

自訂Content Type的舉例
(這個部份:入門只教概念,實作等到進階研習時再教)

 

Content Type:水果

名稱
顏色
重量

價錢

 

 

 

 

 

 

河道上關於Drupal的討論

原噗:http://www.plurk.com/p/ep41f6

00086分享:關於 Drupal + TinyMCE 的編輯與預覽不一致的問題,

目前暫時改用 CKEditor 解決了,編輯與預覽的內容一致了!

試過了在 Windows + TWAMP (7.7.3a,內建CKEditor) + TinyMCE,

只要用 TineMCE 編輯就無法正常顯示,用 CKEditor 一切OK,看來是 TinyMCE的問題吧?!

原噗:http://www.plurk.com/p/eow8bw

00086分享:嗯! Drupal 不錯玩! 看來靜態網頁用這個還滿不錯的感覺! 林主任介紹的

Marinelli 的 theme 的 memu 試出了一些小問題,還頗無解的感覺

,chrome & IE9 下的顯示不一樣,反而 IE9 看起來還正常些!

OK! 使用 Nice menu or Superfish 目前看來的好處是可以達到每個 Basic Page

對於不同角色可以顯示的控制吧! 得再研究~

XDD Marinelli 的自動顯示下拉式選單似乎又有 bug? 一但某一個 basic page 下面超過 7(含) 的選項,整個選單就毀了 而且每增加一個選項就長了一些,有點麻煩,右上角是 Superfish 正常顯示的效果! 看來theme的選單還是OOXX!

 

結識新舊朋友 

臺北教育大學  盧東華教授:臺北市資訊輔導團的指導教授、臺北益教網的靈魂人物(dhlu888)

臺北市濱江國小 林裕勝主任:臺北市資訊輔導團、Drupal 玩家、教育噗浪客 (ethan8)

臺北市資訊輔導團  謝琪文老師:臺北市資訊輔導團、教育噗浪客 (chiwen168)

臺北市新湖國小 吳傳仁老師:ezgo軍師團、臺北自由軟體推動小組 (a0042) 
臺北市士林國小 柯定騏老師 esxi虛擬化超級玩家、教育噗浪客  (00086) 

臺北市新和國小 李昶緒老師:自由軟體和噗浪的新朋友 (christopher538)

00086 昨晚在ESXi 5上架設的Drupal 7展示

http://163.21.181.191/drupal/

這個themes很漂亮 ~ 打聽後再和大家報告

謝感濱崎步哥哥(00086)公佈答案 是「Marineli」~ 有興趣的可以下載來玩玩看

http://drupal.org/project/marinelli

網路上搜集 Joomla 教學的連結

Joomla!台灣 | 繁體中文支援站

http://www.joomla.org.tw/

Joomla模版網站:joomlart

(簡潔好看、容易修改)

http://www.joomlart.com/

Joomla模版網站:rockettheme

(視覺性強、但不好修改)

http://www.rockettheme.com/

Joomla模版網站:templatemonster

(在業界也很有名;缺點是模組特效沒有那麼多)

http://www.templatemonster.com/

Joomla 台灣社群的影片頻道

http://www.youtube.com/user/joomlataiwan

Joomla玩家推薦:華燈初上

http://www.abokuo.com/

Joomla書籍推薦:使用Joomla! 1.7架站的13堂課

http://www.books.com.tw/exep/prod/booksfile.php?item=0010521965

2 則留言:

哇係歪歪 (iCYY) 提到...

太強了,好豐富的內容。

師姐 提到...

您好:

分享訊息給各位老師

DrupalCamp Taipei 2012 提供 [教師研習時數認證]


DrupalCamp 2012研討會已獲准教育部研習時數認證!

參加活動,每日可認列 8 小時的時數認可!

全程參加者在活動結束後,本主辦單位將會把研習記錄傳送至"全國教師在職進修資訊網"

(活動認證連結將於近日公布)

drupal社群

張貼留言