lab 2sb07 php framework (laravel) -...

1

Lab 2SB07 PHP Framework (Laravel) 242-203 Computer Engineering Lab II

Department of Computer Engineering Prince of Songkla University, Hatyai and Phuket Campus

สารบญ

Objectives ...................................................................................................................................2

Introduction ................................................................................................................................2

Installation ..................................................................................................................................3

XAMPP installation ................................................................................................................3

Composer installation ..............................................................................................................3

Hello world example ...................................................................................................................5

Route setup .............................................................................................................................5

Link view and route .................................................................................................................5

Attach data to a view ...............................................................................................................6

Blade template engine .................................................................................................................6

Bootstrap ....................................................................................................................................7

Bootstrap library reference ......................................................................................................7

Eloquent ORM ............................................................................................................................9

Guestbook workshop ................................................................................................................. 11

2

Objectives 1. เพอใหนกศกษาไดรจกและเรยนรเครองมอ PHP Framework สาหรบการทา Web application 2. เพอใหนกศกษารจกและเขาใจ แนวคดและหลกการ MVC (Model-View-Controller) ทใชใน Web programming 3. นกศกษาสามารถสราง Web Application อยางงายโดยใช PHP Framework ได

Introduction Laravel คอ PHP Framework ประเภทหนง ทมความสามารถในการเขยน PHP ในลกษณะของ Model-View-Controller (MVC) อกทงยงมความสามารถอนๆ อกมากมาย เชน Authentication, Object Relational Mapping, Validation, Pagination, template และ อน ๆ อกมากมาย ในปจจบนน PHP Framework มอยมากมายหลายแหลง แต Laravel framework ไดรบความนยมมากเปนอนดบท 1 ดงแสดงในรป (อางองจาก: http://www.sitepoint.com/best-php-frameworks-2014/) เนองจากความงาย ไมซบซอนเกนไป ทางานไดรวดเรว และ มฟงกชนการทางานตาง ๆ ท Framework จาเปนตองมครบครน ทาใหพฒนาระบบไดสะดวก รวดเรวมากยงขน According to the results, the most promising frameworks for 2014 seem to be:

• Laravel • Phalcon • Symfony2

Yii and CodeIgniter seem to be sharing 4th place.

ในสมยกอน การเขยน code PHP จะรวมสวนทรบคาสงจากผใช สวนการประมวลผล รวมถงการแสดงผลลพธทงหมดอยในทเดยวกน ทาใหการพฒนาระบบทาไดลาบาก ไมสามารถแบงแยกผทพฒนาสวน GUI และ ผทพฒนาระบบในสวน Backend ไดอยางชดเจน จงทาใหแนวคดการแบงระบบ ออกเปนสวน ๆ ไดถกพฒนาขน ตามหลกการของ MVC

3

MVC – Model View Controller

MVC จะแบงการทางาน ออกเปน 3 สวนตามรป ในสวนของ Controller จะคอยรบคาสงจากผใช และควบคมการทางานทกอยาง โดยไปจดการกบ Model ซงจะเปนสวนทเกบ logic การทางานของระบบ (บางครงสามารถใสใน Controller ได) และการเขาถงขอมลจากฐานขอมล และสงขอมลตรงน ไป update ใน view

Installation Laravel เปน PHP Framework ซงจะตองทางานโดย web server เพอความสะดวก และรวดเรว ใน Lab น จะเลอกใช XAMPP เปน web server โดยท XAMPP เปนโปรแกรม ทรวบรวม Apache (Web server), mySQL (Database server), PHP (server site script) และ PhpMyAdmin (Database front end Web-based) รวมไวเดยวกนในไฟลเดยวทาใหตดตงไดงาย ไมตองเสยเวลาปรบแตง server ใหเขากน เหมาะสาหรบ develop environment แตไมเหมาะกบ production environment

XAMPP installation อางองไปท XAMPP Installation document (หากเครองทใชงาน ม XAMPP ตดตงอยแลว ใหขามขนตอนนไป) หลงจากตดตง XAMPP เรยบรอยแลว กใหทาการตดตง Laravel ซงมวธการตดตงไดหลายวธ

Composer installation อางองไปท Composer Installation document ใน Lab น เลอกวธการตดตงทงายทสดคอ

• ตดตง Composer เพอใชในการจดการ package ของ Laravel (Composer-Setup.exe)

• ตดตง Laravel o Download template ของ Laravel จาก https://github.com/laravel/laravel/archive/master.zip

� หรอ ดาวนโหลด laravel-master.zip จาก LMS o Unzip laravel-master.zip ลงใน web root directory

4

Note: htdocs คอ web root folder ซงเปน folder ทใชเกบไฟลทสามารถเขาถงไดจาก URL

• โดยเลอกไฟล Composer.json ใน laravel folder

รอ Composer ตดตง Laravel ผานทางเครอขายประมาณ 5 นาท

Note: สามารถ copy folder ท ตดตง Laravel โดย Composer เรยบรอยแลวเปน Web project template ใหมไดเลย

จากนน ทดสอบการทางาน โดยเปดหนา http://localhost/laravel-master/public/index.php

5

หากระบบแสดงหนาดงรป แสดงวาตดตง Laravel เสรจเรยบรอย

Laravel welcome page

เพอใหงายแกการเขาถง ใหทาการเปลยนชอ folder laravel-master เปน web แทน คา Default setting ของ Laravel เปน Production mode เราสามารถกาหนดคา environment โดยตงชอไฟล C:\xampp\htdocs\web\.env และ ใหแสดง mode ของ web โดยใชคาสงดงน ซงใน mode น หากเกด error ขน ระบบ กจะแสดงขอผดพลาดอยางละเอยดวา ผดทไฟลไหน บนทดไหน

Hello world example

Route setup กาหนด app/Http/routes.php

Route::get('/', function()

{

return 'Hello World';

});

เพอใหแสดงขอความ Hello world โดยเขาถงจาก http://localhost/web/public/

Link view and route สรางไฟล C:\xampp\htdocs\web\resources\views\hello.php

6

C:\xampp\htdocs\web\app\Http\routes.php

จะได

Attach data to a view Routes.php

hello.php

Result:

Blade template engine Blade template engine เปนตวทชวยในการ render php script และ html tag ใหอานงายขน รวมถงมการพฒนา tag library ชวยในการทาให code ดงาย สะอาดตา สวยงามมากขน เชน จากทตองเขยนวา <?php echo $name ?> สามารถใช blade เขยนเปน {{$name}} เทานน ทาให code สนลง การใช blade กสามารถทาไดงายดาย โดยการสราง ไฟลนามสกล .blade.php เปนอนเรยบรอย ทดลองใช blade template เปลยนชอ hello.php เปน hello.blade.php และแกไขดงน

7

Bootstrap Bootstrap คอ front end web framework ทชวยในการสรางหนา page ใหมความสวยงาม โดยท bootstrap ไดมการกาหนด style sheet (css), icon ตาง ๆ รวมถง script ทชวยใหการพฒนาในสวนของ GUI ทาไดงายและสะดวกมากยงขน การใชงาน bootstrap จะตองอางอง library มาไวใน page ทจะเรยกใชงาน ซงสามารถทาไดดงน

Bootstrap library reference

1. อางแบบ online 

<link rel="stylesheet"

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">



<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-

theme.min.css">



<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

2. อางองแบบ Local

โดยการ copy ไฟล ใน folder: bootstrap\(css/js/fonts) วางท C:\xampp\htdocs\web\public\ <link media="all" type="text/css" rel="stylesheet" href="http://localhost/web/public/bootstrap/css/bootstrap.min.css">

<link media="all" type="text/css" rel="stylesheet"

href="http://localhost/web/public/bootstrap/css/jquery-ui-bootstrap.css">

<link media="all" type="text/css" rel="stylesheet"

href="http://localhost/web/public/bootstrap/css/social-buttons.css">

<script src="http://localhost/web/public/bootstrap/js/jquery.js"></script>

<script src="http://localhost/web/public/bootstrap/js/jquery-ui.min.js"></script>

<script src="http://localhost/web/public/bootstrap/js/bootstrap.min.js"></script>

3. อางองโดยใช html class เนองจาก html class ไมไดเปน core component ใน laravel 5 จงตองมการตดตงเพมเตมดงน

3.1 แกไข composer.json เปน "require": {

"laravel/framework": "5.0.*",

"illuminate/html": "5.0.*@dev"

},

3.2 เพม config\app.php เปน

'Form' => 'Illuminate\Html\FormFacade',

'HTML' => 'Illuminate\Html\HtmlFacade',

3.3 จากนน right-click ท composer.json เลอก composer update

หาก update เรยบรอยแลว จะไดผลลพธดงน

8

3.4 จากนนกสามารถเรยกใช html โดยการอางองแบบนได

{!! HTML::style('/bootstrap/css/bootstrap.min.css') !!}

{!! HTML::style('/bootstrap/css/jquery-ui-bootstrap.css') !!}

{!! HTML::style('/bootstrap/css/social-buttons.css') !!}

{!! HTML::script('/bootstrap/js/jquery.js') !!}

{!! HTML::script('/bootstrap/js/jquery-ui.min.js') !!}

{!! HTML::script('/bootstrap/js/bootstrap.min.js') !!}

ทดลองแกไขไฟล C:\xampp\htdocs\web\resources\views\hello.blade.php ดงน <html><head><title> Hello heading </title>







</head>

<body>

<div class="container">

<div class="jumbotron">

<h1>Hello world!! {{$name}} </h1>

</div>

<div class="row">

<div class="col-sm-4">

<h3>Column 1</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco

laboris...</p>

</div>


<h3>Column 2</h3>



laboris...</p>

</div>


<h3>Column 3</h3>



laboris...</p>

</div>

</div>

</div>

</body>

</html>

9

ถากาหนด style sheet ไดถกตองจะตองแสดงผลดงน

Eloquent ORM Eloqent ORM คอ การใช class แทนตารางในฐานขอมล ซงทาใหสะดวกในการทจะ insert, edit, delete, update ผานทาง class ทเราสรางขนมาไดงาย โดยไมจาเปนทจะตองเขยนคาสง SQL ในการจดการขอมลในตาราง

1. ไปท phpmyadmin แลว สรางตารางชอวา mytables ตองเตม s เพอจะไดตงชอ class เปนเอกพจน (ไมเตม s เพอใหงายแกการอางอง) ในฐานขอมล test และสรางฟลด (id, name, updated_at, created_at) ไวเกบขอมลดงน เลอก A_I และ Collation เปน utf_unicode_ci ดงรป

2. สราง Class ทใช Map กบ ฐานขอมล โดยตงชอ Class ใหตรงกบชอตาราง (ทเปนเอกพจน) กาหนดเพยงเทาน Controller กจะรจกตาราง mytables โดยอตโนมต

<?php namespace App;

use Illuminate\Database\Eloquent\Model;

class Mytable extends Model {

}

Note: หากไมตองใหใส updated_at และ created_at ใหเพม ใน class Mytable // protected $timestamps = false ;

// disable insert updated_at and created_at

10

เพม form ใน C:\xampp\htdocs\web\resources\views\hello.blade.php ดงน <div class="row">


<form role="form" action="addName" method="POST">

<div class="form-group well">

<label for="name">Name:</label>

<input type="text" class="form-control" id="name" name="name" ><br/>

<input type="hidden" name="_token" value="{{{ csrf_token() }}}" />

<button type="submit" class="btn btn-primary btn-sm">Submit</button>

</div>

</form>

</div>

</div>

Configure database ใน \web\.env DB_HOST=localhost

DB_DATABASE=test

DB_USERNAME=root

DB_PASSWORD=

เพม path addName ใน routes.php use App\Mytable;

Route::post('/addName', function() {

$mytable = new Mytable;

$mytable->name = Input::get('name');

$mytable->save();

return Redirect::to('/hello');

});

Use App\Mytable เปนการใช ORM Eloquent ทาเปน OODB Route::post เปนการรอรบ event การ post ท URI: addName ใหทาในฟงกชน คอ มการกาหนด $mytable เพอนาคาจาก text box ทชอวา name ไปเกบใน ตาราง mytable ชอฟวสวา name จากนนกทาการบนทกลงในตาราง โดยท ฟวส updated_at และ created_at กจะถงบนทกดวยโดยอตโนมต ดผลการเพมขอมลในฐานขอมล โดยการสรางไฟล C:\xampp\htdocs\web\resources\views\showName.php <html><head><title> Hello heading </title>







</head>

<body>

<div class="container">

<div class="jumbotron">

<h1>Hello world!! {{$title}} </h1>

</div>

@foreach($mytables as $tb)



<div class="row well">

<strong>From: </strong>

{{$tb->name}}

</div>



@endforeach

</div>

</body>

</html>

11

เพม routes.php Route::get('/showName', function() {

$mytable = Mytable::orderBy('updated_at','DESC')->get();

return view('showName')

->with('title', 'Hello')

->with('mytables', $mytable);

});

แสดงผลไดจาก http://localhost/web/public/showName คาสงอน ๆ สามารถดเพมเตมไดจาก laravel.com

Guestbook workshop 1. Create database: (phpmyadmin) สรางฐานขอมล guestbook และ ตาราง comments ไวสาหรบเกบขอมล

Note: สามารถใชการ Import จาก guestbook.sql

2. Copy view ทงหมด จาก myview.rar ลงใน folder web\resources\views\myview\

12

อธบาย template ของ blade

template.blade.php จะเปน Layout หลก ทกาหนดโครงสรางของหนา web ประกอบไปดวย

@include("myview.header")

@yield("content")

@include("myview.footer")

รปแสดงโครงสรางของ page

แมวา template.blade.php จะเปนไฟลโครงสรางหลกในการเขาถงขอมล แตไฟลในการอางองจาก URL ไฟลแรกจะเปนในสวนของ content (index.blade.php) ของหนา template (เพอใหงายแกการออกแบบ) ดงนนใน index.blade.php จงจาเปนจะตองเรมตนดวย การ extends template มากอน แลวตามดวย สวนของ content ดงน @extends("myview.template")

@section("content")

...

@endsection

3. แกไฟล .env เพอใชงาน database ทชอวา guestbook

DB_HOST=localhost

DB_DATABASE=guestbook

DB_USERNAME=root

DB_PASSWORD=

4. Copy GuestbookController วางใน folder web\app\Http\Controllers\GuestbookController.php

5. สราง Eloquent ของ Comment ใน folder \web\app\Comment.php

<?php namespace App;

use Illuminate\Database\Eloquent\Model;

class Comment extends Model {

}

6. เพมเตม routes.php ดงน

use App\Comment;

Route::post('myview/addComment','GuestbookController@addComment');

template.blade.php

header.blade.php

index.blade.php

footer.blade.php

13

Route::get('myview', function() {

return Redirect::to('/myview/index');

});

Route::get('myview/index', function() {

$comment = Comment::orderBy('updated_at','DESC')->get();

return view('myview.index')

->with('title', 'Guestbook comments')

->with('comments', $comment);

});

Route::post('myview/search', function () {

$query = Input::get('search');

//print_r($query);

$comment = Comment::where('comment','LIKE','%'.$query.'%')->get();

$count = Comment::where('comment','LIKE','%'.$query.'%')->count();

print_r("count =" + $count );

//dd(DB::getQueryLog());

//print_r($comment);

return view('myview.search')

->with('title', 'Guestbook comments')

->with('comments', $comment)

->with('count', $count);

});

Route::get('myview/delete/{id}', function($id) {

$comment = Comment::find($id);

$comment->delete();

return Redirect::to('myview/index');

});

Route::get('myview/edit/{id}','GuestbookController@editComment');

Route::post('myview/saveComment/{id}','GuestbookController@saveComment');

ตวอยางของผลการตดตง Guestbook

lab 2sb07 php framework (laravel) -...

Documents