Monday, August 17, 2015

การใช้งาน Theme Bootstrap Backend

การใช้งาน Theme Bootstrap Backend[Laravel4][Laravel][Ubuntu]

การทดสอบนี้ เป็นการใช้ theme ของ Edmin ซึ่งสามารถทำการดาวน์โหลดได้ ที่นี่

เมื่อทำการดาวน์โหลดมาแล้วจะได้ไฟล์ edmin.zip

ก๊อบไฟล์ edmin.zip ที่ได้นำไปไว้ที่ /var/www/laravel/public/

เปปิดโปรแกรม Terminal

ใช้คำสั่งเพื่อไปที่เก็บไฟล์

cd /var/www/laravel/public  

unzip edmin.zip

mv bootstrap/* .

rm -rf bootstrap/ 

จากนั้นทำการสร้าง folder ใหม่ขึ้นมา เก็บไว้ใน /var/www/laravel/app/views/ 

 ชื่อ theme


ก๊อบไฟล์ ที่อยู่ใน /var/www/laravel/public/code/ ซึ่งประกอบด้วย .html ไปใส่ไว้ใน Theme  
(มีทั้งหมด 12 ไฟล์)
ทำการเปลี่ยนนามสกุลไฟล์ทั้งหมด จาก .html เป็น blade.php 

ทำการแก้ไขไฟล์ routes.php ซึ่งอยู่ใน /var/www/laravel/app/ โดยเพิ่มคำสั่งข้างล่างนี้

 Route::get('/activity', function()
{
    return View::make('Theme.activity');
});
Route::get('/charts', function()
{
    return View::make('Theme.charts');
});
Route::get('/form', function()
{
    return View::make('Theme.form');
});

Route::get('/index', function()
{
    return View::make('Theme.index');
});
Route::get('/message', function()
{
    return View::make('Theme.message');
});
Route::get('/other-login', function()
{
    return View::make('Theme.other-login');
});
Route::get('/other-user-listing', function()
{
    return View::make('Theme.other-user-listing');
});
Route::get('/other-user-profile', function()
{
    return View::make('Theme.other-user-profile');
});
Route::get('/table', function()
{
    return View::make('Theme.table');
});
Route::get('/task', function()
{
    return View::make('Theme.task');
});
Route::get('/ui-button-icon', function()
{
    return View::make('Theme.ui-button-icon');
});
Route::get('/ui-typography', function()
{
    return View::make('Theme.ui-typography');
});


จากนั้นทำการแก้ไขไฟล์ ที่อยู่ใน folder Theme ทั้งหมด

แก้ไข

ส่วนของ Head ให้เป็นดัง Code ข้างล่าง

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edmin</title>
    <link type="text/css" href="code/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link type="text/css" href="
code/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
    <link type="text/css" href="
code/css/theme.css" rel="stylesheet">
    <link type="text/css" href="
code/images/icons/css/font-awesome.css" rel="stylesheet">
    <link type="text/css" href='
code/http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600' rel='stylesheet'>
</head>



จากนั้น เติม


code/ ไว้ใน Url ของรูปทุกเช่น
จาก user.png เป็น code/user.png

แก้ไขคำสั่งที่มี .html ให้ลบ .html ออก

ทำให้ครบ 12 ไฟล์ 
สามารถเปิดการใช้งาน Url ได้ที่ : http://localhost/index 


No comments:

Post a Comment