Hướng dẫn tạo Forum VBB (giống diễn đàn trường mình đấy)

Phần 1: Tạo Database, install Forum lên localhost - Cơ bản về Style

Phần 1: Cài đặt vBulletin

- Yêu cầu thứ 1 là bạn phải có 1 host hỗ trợ PHP 4.3.0 (hoặc cao hơn) và MySQL 3.23 (hoặc cao hơn). Do cũng ko có "ziền" nên mình cũng sử dụng host Free lun T__T

http://dothost.eu

Chú ý: Nếu bạn đã có Domain thì check vào I already have a registered domain: và điền domain của bạn vào ô phía dưới. Nếu chưa có, Dothost đã hỗ trợ cho bạn một vài Subdomain sẵng lun rùi.

http://www40.websamba.com/hoang_tu_e...vbb/signup.png

1. Tạo database trên host và localhost

Bạn nhấn vào MySQL® Databases để vào phần quản lý Database.
Bước 1: ở phần Create New Database bạn điền Tên Database muốn tạo vào (trong ví dụ
minh họa tôi điền forum) => nhấn nút [Create Database]
Bước 2: Create New Database User bạn điền tên User vào (trong ví dụ là root) =>nhấn nút [Create User]

http://www40.websamba.com/hoang_tu_e...b/Database.png

Bước 3: Liên Kết Database với User

http://www40.websamba.com/hoang_tu_e...abase_link.png

Chú ý 2 phần khoanh tròn, bạn phãi chọn đúng Database và User đã tạo ở trên => nhấn nút [Connet User to Database]

Nếu thành công các bước trên, các bạn sẽ thấy thông tin như thế này:

http://www40.websamba.com/hoang_tu_e...atabase_fn.png

Các bạn phãi chú ý phần này vì chúy nữa mình sẽ điền cái này vào thiết lập của Forum, các Host khác đều tương tự thế này thôi...
- Database: db56157_forum
- User: u56157_root
- Host: localhost



- Để cài đặt 1 Forum, trước tiên bạn cần có 1 mã nguồn vBB mới. Vì hok có "ziền" nên các bước hướng dẫn trong bài viết này mình sử dụng bản vBB 3.65 Null.

Download:
vBulletin.3.6.5.NULL-vBTEAM.rar

2. Cài đặt forum vBB lên host

- Bước 1: Bạn Download, giải nén. Sao đó vào thư mục giải nén, mở Folder upload/includes/ bạn sẽ thấy 1 file có tên config.php.new => đổi nó thành config.php, dùng NotePad để mở nó ra và làm theo hướng dẫn trong đó. Quan trọng là các thông số:
+ Tên Database đã tạo trên host (VD:db56157_forum
CODE
$config['Database']['dbname'] = 'db56157_forum';

+ Username và Password kết nối vào Database
CODE
$config['MasterServer']['username'] = 'u56157_root';
$config['MasterServer']['password'] = 'XXXXXX';

+ Email quản trị Forum (nếu có lỗi phát sinh, dịch vụ sẽ gởi mail về địa chỉ này)
CODE
$config['Database']['technicalemail'] = 'Fairy.Tale.23@Gmail.com';

(Nhớ thay các thông số phù hợp với bạn)

- Bước 2: Up tất cã các các file trong thư mục upload lên host. Nếu bạn muốn tạo forum có dạng http://tênmiền/Forum thì hãy tạo thêm 1 Folder Forum trên host.
Khuyến cáo: Nên dùng 1 chương trình hỗ trợ Upload (VD: CuteFTP, Web FTP..)

- Bước 3: Cài Đặt Forum vBB
Mở trình duyệt web và gõ vào http://domain/Forum/install/install.php (thay domain bằng tên miền bạn đã đăng ký)
Nếu thành công bạn sẽ thấy màng hình Install như thế này:
http://cuasotinhoc.vn/style_images/c...mg-resized.png Reduced: 57% of original size [ 886 x 314 ] - Click to view full image
http://www40.websamba.com/hoang_tu_e...bb/install.png

Nhấn vào nút [Next Step (1/13)] để tiếp tục công việc. Bạn cứ nhấn Next, đến Step 9 các bạn chú ý:
+ BB Title : Tiêu Đề ,
+ Homepage Title :Tiêu Đề Trang chủ,
+ BB URL : đường link đến diễn đàn ,
+ Home URL : Link trang chủ,
+ Webmaster email address : Email của Quản trị Diễn đàn ,
(Các mục khác để nguyên. )
Nhấn [Proceed] tiếp tục cài đặt.
Nhấn Next. Đến Step 11 yêu cầu bạn tạo 1 tài khoảng Quản Trị (Admin). Bạn điền tài khoảng,password, email vào các ô tương ứng.
Nhấn [Proceed] tiếp tục cài đặt.
Nhấn Next. Đến Step 13 xem như bạn đã hoàng thành việc cài đặt 1 forum vBB rùi đó. Chú ý đến dòng The control panel can be found here, nhấn vào here để vào AdminCP.

http://cuasotinhoc.vn/style_images/c...mg-resized.png Reduced: 57% of original size [ 888 x 337 ] - Click to view full image
http://www40.websamba.com/hoang_tu_e...install_fn.png

Nếu nhấn vào đó thấy thông báo:
http://cuasotinhoc.vn/style_images/c...mg-resized.png Reduced: 77% of original size [ 661 x 235 ] - Click to view full image
http://www40.websamba.com/hoang_tu_e...nstall_err.png
Bạn hãy đổi tên (hoặc xóa) file install/install.php và install/init.php
Chú ý: sao khi Install thành công Forum, các bạn phãi xóa ngay file install/install.php và file install/upgrade1.php để không ai có thể install lại forum của bạn một lần nữa.

-----------------------------------------
3. Việt Hóa Forum và Admin CP
Để Việt Hóa, bạn cần 1 gói Ngôn Ngữ Việt đc làm sẵng dưới dạng .xml

Download: VietHoa.zip

- Download về máy và giải nén, bạn sẽ đc 1 file vbulletin.xml.
- Tiếp theo, bạn vào AdminCP (theo đường dẫn http://domain/Forum/admincp/index.php).
- Admincp => Languages & Phrases =>Download/Upload Languages => Import Language XML File
+ Nhấn Browse... tìm đến file Việt Hóa bạn giải nén.
+ Ignore Language Version: Chọn Yes
+ Nhấn Import để upload và cài đặt.
- Sao khi tiến trình Upload và Cài đặt hoàn tất, Nhấn Done, bạn sẽ thấy xuất hiện 2 Ngôn Ngữ (English và Tiếng Việt). Nhấn Set Default để đặt Tiếng Việt là ngôn ngữ mặc định.

4. Cài bộ gõ Viettyping
Đây là bộ gõ tương đối ổn định, phổ biến, hầu hết các Forum đều dùng bộ gõ này và quan trọng là dễ cài đặt nhất http://cuasotinhoc.vn/style_emoticons/default/jeje.gif

Download: VietTyping.zip

Upload file VietTyping.js (giải nén từ file viettyping.zip) lên host (trong Folder Forum mà bạn đã upload)
Bước 1:
- Vào AdminCP =>Styles & Templates =>Style Manager. Chọn 1 Skin cần chèn bộ gõ, nhưng ở đây chúng ta chưa nói đến skin nên chỉ có 1 skin Default Style thui. Mai mốt bạn muốn chèn bộ gõ cho Skin nào,cứ việc làm theo như vậy.
- Nhấn nút Tiếp Tục
- Header bạn chèn vào trên cùng:
CODE
<script language=Javascript src="viettyping.js"></SCRIPT>

- Headinclude bạn tìm đoạn: (Nhấn phím [Ctrl] + F, hoặc không thì nó thường là đoạn đầu tiên trong Headinclude)
CODE
<meta http-equiv="Content-Type" content="text/html; charset=$stylevar[charset]" />

Thay bằng
CODE
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<script type=\"text/javascript\" src=\"viettyping.js\"></script>

- Nhấn nút Save đểlưu thiết lập.

Bước 2:
- Vào AdminCP => vBulletin Options => vBulletin Options
+ Chọn Censorship Options nhấn Sửa Thiết Lập (Dòng thứ 11 ý)
+ Trong Mục Blank Character Stripper bạn xóa hết tất cã chữ/số trong đó và Save lại.
- Quay trở ra vBulletin Options
+ Chọn Message Posting Interface Options nhấn Sửa ThiếpLập
+ Trong mục Enable Clickable Message Formatting Controls bạn chọn
* Soạn thảo đầy đủ: Bật Điều Khiển Chuẫn & WYSIWYG Control
* Trả lời nhanh: Bật Điều Khiển Chuẫn & WYSIWYG Control
* Quick Edit: Bật Điều Khiển Chuẫn & WYSIWYG Control
+ Nhấn Save để lưu lại thiết lập.


5. Tạo Forum con

Bước 1: Tạo Category (thư mục lớn)

- AdmincCP => Forums & Moderators => Add New Forum
+ Chủ Đề: Tên Category
+ Miêu Tả: Để trống
+ Act as Forum: chọn Không
+ Forum is Active: chọn Có
-Nhấn Save để lưu thiết lập.

Bước 2: Tạo Forum (thư mục con)

- AdmincCP => Forums & Moderators => Add New Forum
+ Chủ Đề: Tên Forum
+ Miêu Tả: Nói sơ lược về chức năng Forum
+ Diễn Đàn Gốc: là Category sẽ chứa Forum này.
- Nhấn Save để lưu Thiết Lập.

Khi Hoàng thành, Forum của bạn sẽ trông như thế này.
http://cuasotinhoc.vn/style_images/c...mg-resized.png Reduced: 54% of original size [ 943 x 275 ] - Click to view full image
http://www40.websamba.com/hoang_tu_e...nvbb/forum.png

Đã xong bước Tạo Forum con.



6. Hiệu Chỉnh một số vấn đề sau khi cài đặt

Mở khung Trã Lời Nhanh

- Vào AdminCP => Tùy Chọn Diễn Đàn => Message Posting and Editing Options
+ Mục Quick Reply, bạn chọn Ðồng ý, Click Not Required
- Nhấn nút Save. Và bây giờ khung Trã Lời Nhanh đã đc mở ở cuối mỗi trang bài viết rùi đó.

Thay đổi định dàng Ngày/Giờ

- Vào AdminCP => Tùy Chọn Diễn Đàn => Date and Time Options
+ Mục Default Time Zone Offset: chọn múi giờ tương ứng (Việt Nam là GMT +7:00)
+ Mục Format For Date: sửa lại d-m-Y (Ngày - Tháng - Năm)
- Các phần còn lại để nguyên.
- Nhấn Save để lưu lại thiếp lập

Hiện Sub Forum ra ngoài

- Vào AdminCP => Tùy Chọn Diễn Đàn => Forum Listings Display Options
+ Mục Depth of Sub-Forums: mặc định là 0, bạn chọn số Sup-Forum muốn hiển thị (#0)
- Nhấn Save để lưu thiết lập
http://cuasotinhoc.vn/style_images/c...mg-resized.png Reduced: 54% of original size [ 938 x 176 ] - Click to view full image
http://www40.websamba.com/hoang_tu_e.../sub-forum.png



TO BE CONTINUE...

(nguồn: cửa sổ tin học)

Phần 2: Hướng dẫn cài đặt Style (Skin)


1. Cài đặt một Skin mới

Để cài 1 Skin mới lên Forum, bạn cần có 1 bộ mã của Skin. Nếu bạn không thể tự tạo cho mình 1 skin riêng, bạn có thể vào đây để chọn và Download 1 Skin bạn thích:
http://www.vnfriends.net/forum/forumdisplay.php?f=66

- Giải nén Skin trong 1 thư mục riêng, up tất cã lên Host. Bạn nên tạo riêng 1 thư mục Styles riêng để quản lý nếu số lượng skin trong Forum bạn có quá nhiều.
- Trong ví dụ này mình sẽ dùng Skin Deepblack lưu trong thư mục 9tl_deepblack/
- Vào AdminCP => Styles & Templates => Download/Upload Styles
+ Mục Import Style XML File
* Nhập file XML từ server của bạn: Bạn điền đường dẫn đến file .XML mà bạn đã up lên host.
* Ignore Style Version: chọn Đồng Ý
* Hiển thị sắp xếp: Chọn thứ tự sắp xếp trong bản Skin (>1)
- Nhấn Nhập Vào để thêm Skin vào diễn đàn.

Reduced: 83% of original size [ 610 x 419 ] - Click to view full image

Bây giờ hãy vào Forum của bạn và chọn Skyn vừa tạo xem nào..!
Reduced: 50% of original size [ 1024 x 1150 ] - Click to view full image


2. Hiệu Chỉnh CSS của 1 Skin
Vào Style & Templates => Manager Style => Main CSS

- Bạn dựa vào hướng dẫn trong đó để chĩnh lại Skin theo ý thích...
Ảnh nền trong phần viết bài:
- Mục WYSIWYG Editor (Should usually be the same as 'First Alternating Color' or 'Input Fields')
+ Background: xóa hết và thay bằng
CODE
#F5F5FF url(link ảnh nền) no-repeat center
(link ảnh nền là đường dẫn của file ảnh nền)
-----------------------------------------
Thùng Rác Cho Diễn Đàn


Download:
- Giải nén file vBRecycle.zip, upload các file trong thư mục upload vào các thư mục tương ứng trên host
- Admincp =>Plugins & Products =>Manage Products => nhấn vào [Add/Import Product] Import file product-vbrecycle.xml (nhấp vào nút Browse, chọn đến file product-vbrecycle.xml, nhấn Nhập Vào)
Đến đây xem như bạn đã hoàn thành 50%, bước tiếp theo sẽ tạo 1 Box để chứa các file rác của Diễn Đàn.
- Nhấn F5 để làm mới trang AdminCP, mục đích là làm cho trang AdminCP hiện thêm phần Tùy Chọn vBRecycle mà mình vừa thêm vào thui.
- AdminCP => Tùy Chọn vBRecycle => Quick Create Recycle
* Chủ đề: Tên của Thùng Rác (mặc định là Recycle Bin, bạn có thể đổi lại theo ý thích như Thùng Rác..)
* Mặc định thời hạn xem: chọn Tất Cã Đề Tài để sau này dễ quản lý.
* Diễn đàn gốc: Chọn nơi bạn muốn đắt Thùng Rác (trong ví dụ mình để Thùng Rác trong Nhà Kho)
* Set Default Recycle: Đặt thùng rác này là Thùng Rác Mặc Định - chọn Yes
Nhấn Save => xong rùi, thùng rác đã hoạt động.
Minh Họa:



- Tiếp theo ta sẽ set quyền cho những nhóm có thể dọn rác.
* AdminCP => Usergroups => Usergroup Manager => Chọn nhóm muốn cho quản lý Thùng Rác (thường thì Admin và Sup Mod thui nha)
* Phần vBRecycle Permissions chú ý:
>>> Can move threads to recycle (showthread): chọn Yes
>>> Can move threads to recycle (forumdisplay): chọn Yes
Đã xong 100%, chúc bạn thành công
Bạn có thể xem DEMO ở bên dưới:
DEMO:
Thùng Rác



BBCode

BBCode là gì?
- BBCode là một dạng thức bổ sung đặc biệt của mã HTML. Việc bạn có sử dụng BBCode được hay không là tuỳ vào quyết định của người quản trị. Bạn cũng có thể tắt BBCode với lựa chọn xuất hiện sau khung soạn bài viết. Bản thân BBCode tương tự gần giống như HTML: thẻ lệnh được đóng mở bằng dấu [ và ] thay vì < và >. Nó cho phép tuỳ biến sử dụng và điều khiển dễ dàng hơn mã HTML.
Cách thêm 1 BBCode cho Forum:
- AdminCP => Custom BB Codes => Add New BB Code. Chú ý các mục:
* Chủ Đề: Tên của BBCode (tùy bạn)
* Tag: Tùy chức năng bạn nên đặt tên cho Tag thật dễ nhớ để dễ sử dụng.
* Replacement : Mã HTML tương ứng
* Use {option}: sử dụng tùy chọn {option} cho Tag
* Button Image: Hình của Tag trong khung soạn thảo.

Các BBCode phổ biến trong Forum vBB

BBCode Play nhạc:
DEMO: http://hutech.freeweb7.com/DienDan/showthread.php?t=5
Code này có thể play hầu hết tất cã các file nhạc Media thông dụng, play Video...
- Chủ Đề: Play MEDIA
- Tag: MUSIC
- Replacement :
CODE
<-- <OBJECT ID="NSPlay" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
standby="Loading Microsoft Windows Media Player components..."
type="application/x-oleobject">
<param name="Filename" value="{param}">
<PARAM NAME="ShowControls" VALUE="-1">
<PARAM NAME="ShowDisplay" VALUE="0">
<PARAM NAME="ShowStatusBar" VALUE="-1">
<PARAM NAME="AutoSize" VALUE="0">
<param name="AudioStream" value="-1">

<param name="AutoStart" value="-1">
<param name="AnimationAtStart" value="-1">
<param name="AllowScan" value="-1">
<param name="AllowChangeDisplaySize" value="-1">
<param name="AutoRewind" value="0">
<param name="Balance" value="0">
<param name="BaseURL" value>
<param name="BufferingTime" value="5">
<param name="CaptioningID" value>

<param name="ClickToPlay" value="-1">
<param name="CursorType" value="0">
<param name="CurrentPosition" value="-1">
<param name="CurrentMarker" value="0">
<param name="DefaultFrame" value>
<param name="DisplayBackColor" value="0">
<param name="DisplayForeColor" value="16777215">
<param name="DisplayMode" value="0">
<param name="DisplaySize" value="4">

<param name="Enabled" value="-1">
<param name="EnableContextMenu" value="false">
<param name="EnablePositionControls" value="-1">
<param name="EnableFullScreenControls" value="0">
<param name="EnableTracker" value="-1">
<param name="InvokeURLs" value="-1">
<param name="Language" value="-1">
<param name="Mute" value="0">
<param name="PlayCount" value="5">

<param name="PreviewMode" value="0">
<param name="Rate" value="1">
<param name="SAMILang" value>
<param name="SAMIStyle" value>
<param name="SAMIFileName" value>
<param name="SelectionStart" value="-1">
<param name="SelectionEnd" value="-1">
<param name="SendOpenStateChangeEvents" value="-1">
<param name="SendWarningEvents" value="-1">

<param name="SendErrorEvents" value="-1">
<param name="SendKeyboardEvents" value="0">
<param name="SendMouseClickEvents" value="0">
<param name="SendMouseMoveEvents" value="0">
<param name="SendPlayStateChangeEvents" value="-1">
<param name="ShowCaptioning" value="0">
<param name="ShowAudioControls" value="-1">
<param name="ShowGotoBar" value="0">
<param name="ShowPositionControls" value="-1">

<param name="ShowTracker" value="-1">
<param name="TransparentAtStart" value="0">
<param name="VideoBorderWidth" value="0">
<param name="VideoBorderColor" value="0">
<param name="VideoBorder3D" value="0">
<param name="Volume" value="-180">
<param name="WindowlessVideo" value="0">
<EMBED Name="Mediaplayer" file={param} src={param} ShowControls=1 ShowDisplay=0 ShowStatusBar=1 width=320 height=320> </embed>
</OBJECT> -->
-----------------------------------------
BBCode chạy Flash:Chủ Đề: Play Flash
- Tag: FLASH
- Replacement:
CODE
<OBJECT classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
WIDTH="500" HEIGHT="300" id="{param}" ALIGN="">
<PARAM NAME=movie VALUE="{param}"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="{param}" quality=high bgcolor=#FFFFFF WIDTH="400" HEIGHT="250" NAME="{param}" ALIGN=""
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>
- Use {option}: NO
- Button Image: http://www40.websamba.com/hoang_tu_e...code/flash.gif


BBCode YouTube Video:

- Chủ Đề: YouTube Video
- Tag: YOUTUBE
- Replacement:
CODE
<table class="tborder" cellpadding="6" cellspacing="1" border="0" style="width:auto;margin:10px 0;">
<thead>
<tr>
<td class="tcat" colspan="2" style="text-align:center">
<a href="http://www.youtube.com/watch?v={param}" title="View this video at YouTube in a new window or tab" target="_blank">YouTube Video</a>
</td>
</tr>
</thead>
<tbody>
<tr>
<td class="panelsurround" align="center">
<object width="425" height="340" type="application/x-shockwave-flash" data="http://www.youtube.com/v/{param}">
<param name="movie" value="http://www.youtube.com/v/{param}" />
<param name="wmode" value="transparent" />
<em><strong>ERROR:</strong> If you can see this, then <a href="http://www.youtube.com/">YouTube</a> is down or you don't have Flash installed.</em>
</object>
</td>
</tr>
</tbody>
</table>
- Use {option}: NO
- Button Image: http://www40.websamba.com/hoang_tu_e...de/youtube.gif


BBCode Google Video:

- Chủ Đề: Google Video
- Tag: GVIDEO
- Replacement:
CODE
<table class="tborder" cellpadding="6" cellspacing="1" border="0" style="width:auto;margin:10px 0;">
<thead>
<tr>
<td class="tcat" colspan="2" style="text-align:center">
<a href="http://video.google.com/videoplay?docid={param}" title="View this video at Google Video in a new window or tab" target="_blank">Google Video</a>
</td>
</tr>
</thead>
<tbody>
<tr>
<td class="panelsurround" align="center">
<object width="400" height="326" type="application/x-shockwave-flash" data="http://video.google.com/googleplayer.swf?docId={param}">
<param name="movie" value="http://video.google.com/googleplayer.swf?docId={param}" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="quality" value="best" />
<param name="scale" value="noScale" />
<param name="wmode" value="transparent" />
<param name="salign" value="TL" />
<param name="FlashVars" value="playerMode=embedded" />
<em><strong>ERROR:</strong> If you can see this, then <a href="http://video.google.com/">Google Video</a> is down or you don't have Flash installed.</em>
</object>
</td>
</tr>
</tbody>
</table>
- Use {option}: NO
- Button Image: http://www40.websamba.com/hoang_tu_e...ode/google.gif

kha kha, thanks anh ná, bài výt này tốt ghê
cho dù em chả hỉu chỵ :D

rất cám ơn chú Candy nha , cái này tốt cho mọi người tập làm forum đấy :picknose: