Memaparkan catatan dengan label Mobile Apps. Papar semua catatan
Memaparkan catatan dengan label Mobile Apps. Papar semua catatan

Laravel part 6 - Migration

Mencipta table student menggunakan migration. Migration ialah pembinaan database yang boleh di rollback dan ala-ala github gitu tetapi dalam bentuk database.

php artisan make:migration create_students_table
Created Migration: 2019_10_17_141304_create_students_table


Boleh rujuk di:
https://laravel.com/docs/5.8/migrations

Secara default didalam file create_students_table akan mengandungi id dan timestamps:

    public function up()
    {
        Schema::create('students'function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->timestamps();
        });
    }


Kita akan buat penambahan didalam  table ini. Untuk dokumentasi cara bina dan jenis-jenis type data boleh lihat di: https://laravel.com/docs/5.8/migrations#creating-columns

Kita ingin menambah column nama, no ic, email dan major ke celah-celah diantgara id dan timestamps.

    public function up()
    {
        Schema::create('students'function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('nama');
            $table->char('noic',15)->unique();
            $table->string('email')->unique();
            $table->string('major');
            $table->timestamps();
        });
    }

kemudian, pergi ke terminal untuk migrate script ini dan run:
php artisan migrate

jika kita tengok, selain script create_students_table, terdapat dua lagi script yang dirun, itu adalah file default yang kita boleh delete dari folder database di dalam laravel.
manakala terdapat table pelajar, yang kita gunakan semasa laravel part 5. Ianya adalah yang asal dicipta menggunakan mysql dan bukan migrate.

Untuk undo semua script migration:
php aritsan migrate:rollback


Namun bagi file pelajar yang kita bina menggunakan mysql, ianya tidak rollback kerana script tersebut tiada didalam folder database dalam laravel

Jom kita melihat struktur data di dalam pelajar



Sekarang tambah 4 data untuk kita test. Table students tersebut sebenarnya sama sahaja data & datatype yang telah kita bina di tutorial ke 6 tempoh hari. Jadi kita boleh menukar table dari pelajardb kepada students di PelajarController untuk melihat hasilnya

class PelajarController extends Controller
{
    public function index()
    {
      $pelajar = DB::table('students')->get();
  
       return view('pelajar.index',['pelajar'=>$pelajar]);
    }
}

hasilnya:

Alhamdulillah. Siap bina database menggunakan migration. Sekarang kita akan membina model pula. Sila ke pelajaran seterusnya.

Mobile Apps 3 : Gunakan Pages Sebagai Dailog

 


<!--
* Mari Belajar PHP
* @copyright (c) 2015, Encraptor Inc. All Right Reserved
* @author Encraptor@gmail.com

* @link http://encraption.blogspot.com
* @version 20151
* @desc Mobile Apps 3 : Gunakan Pages Sebagai Dailog
* Fail: 3_PagesSebagaiDailog.php

-->

<!-- Tag <!DOCTYPE html> merupakan tag HTML5 -->
<!DOCTYPE html>
<html>
<head>

<!-- meta name untuk device mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Kita perlu memanggil 3 perkara asas rujukan untuk mobile apps iaitu JQUERY, JQUERY MOBILE serta JQUERY MOBILE CSS-->

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>


<div data-role="page" id="pageone">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>

<div data-role="main" class="ui-content">
<p>Welcome!</p>
<a href="#pagetwo">Go to Dialog Page</a>
</div>

<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>

<!-- Untuk menjadikan sesuatu page itu menjadi dialog page, kita perlu set data-dialog="true" di page berkenaan -->

<div data-role="page" data-dialog="true" id="pagetwo">
<div data-role="header">
<h1>I'm A Dialog Box!</h1>
</div>

<div data-role="main" class="ui-content">
<p>The dialog box is different from a normal page, it is displayed on top of the current page and it will not span the entire width of the page. The dialog has also an icon of "X" in the header to close the box.</p>
<a href="#pageone">Go to Page One</a>
</div>

<div data-role="footer">
<h1>Footer Text In Dialog</h1>
</div>
</div>


</body>
</html>


 



3_PagesSebagaiDailog1



3_PagesSebagaiDailog2


Mobile Apps 2: Menambah Page Didalam Mobile Apps

 


<!--
* Mari Belajar PHP
* @copyright (c) 2015, Encraptor Inc. All Right Reserved
* @author Encraptor@gmail.com

* @link http://encraption.blogspot.com
* @version 20151
* @desc Menambah Page Didalam Mobile Apps
* Fail: 2_tambahPageDanLink.php

-->

<!-- Tag <!DOCTYPE html> merupakan tag HTML5 -->


<!DOCTYPE html>
<html>
<head>
<!-- meta name untuk device mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Kita perlu memanggil 3 perkara asas rujukan untuk mobile apps iaitu JQUERY, JQUERY MOBILE serta JQUERY MOBILE CSS-->

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<!-- Setiap page perlu diset <div data-role="page"> dan mempunyai tiga data-role iaitu header,main dan footer
Oleh kerana terdapat beberapa page, maka kita perlu letakkan id di page tersebut.
Setiap ID Page ada Nama Yang Unik. Contoh: id="pageone" dan id="pagetwo".
Cara panggil adalah href="#pagetwo" dan href="#pageone".
-->


<!-- Page pertama bernama pageone, nama tersebut di letakkan di ID sebelah data-role="page" -->
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>

<div data-role="main" class="ui-content">
<p>Welcome! If you click on the link below, it will take you to Page Two.</p>
<a href="#pagetwo">Go to Page Two</a>
</div>

<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>

<!-- Page pertama bernama pagetwo, nama tersebut di letakkan di ID sebelah data-role="page" -->
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>

<div data-role="main" class="ui-content">


<!-- Cara memanggil page tersebut dengan meletakkan # disebelah nama yang diberikan pada id page.
contoh: <a href="#pageone"> -->
<p>This is Page Two. If you click on the link below, it will take you to Page One.</p>
<a href="#pageone">Go to Page One</a>
</div>

<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>

</body>
</html>


2_tambahPageDanLink1



2_tambahPageDanLink2


Mobile Apps 1 : Asas-asas dalam Page

<!--
* Mari Belajar PHP
* @copyright (c) 2015, Encraptor Inc. All Right Reserved
* @author Encraptor@gmail.com

* @link http://encraption.blogspot.com
* @version 20151
* @desc Penenrangan Asas bagi Mobile Apps didalam HTML5
* Fail: 1_AsasPageMobile.php

-->

<!-- Tag <!DOCTYPE html> merupakan tag HTML5 -->
<!DOCTYPE html>



<html>
<head>

<!-- meta name untuk device mobile -->

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Kita perlu memanggil 3 perkara asas rujukan untuk mobile apps iaitu JQUERY, JQUERY MOBILE serta JQUERY MOBILE CSS-->

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<!-- Setiap page perlu diset <div data-role="page"> dan mempunyai tiga data-role iaitu header,main dan footer -->

<div data-role="page">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>

<div data-role="main" class="ui-content">
<p>I Am Now A Mobile Developer!!</p>
</div>

<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>

</body>
</html>


1_AsasPageMobile



 



Rujukan penting: W3Schools->JqueryMobile