Cara mempercantik tampilan web php

Email merupakan hal yang cukup penting saat pengelola situs ingin berhubungan dan berkomunikasi aktif dengan client dalam memasarkan produknya. Email sangat bermanfaat jika suatu perusahaan memiliki produk baru dan akan diinformasikan kepada client melalui pesan email. Email juga merupakan sarana terbaik yang dapat digunakan jika terjadi masalah dan pengguna dapat menghubungi pengelolanya dengan mudah.

Tampilan konten email dalam bentuk teks sederhana akan terasa membosankan. Tampilan standart berupa teks sederhana tanpa variasi warna huruf, variasi warna latar, pemberian gambar pendukung produk akan menimbulkan kesan bahwa konten email tersebut tidak memiliki arti dan terlihat tidak profesional. Anda dapat membuat sebuah kiriman email dengan konten yang lebih menarik dengan memberikan berbagai tambahan warna, pilihan gambar pendukung dan lainnya.

Pembuatan konten email seperti di atas dapat memanfaatkan berbagai HTML element tag. Konsepnya adalah seperti membuat halaman HTML seperti biasa, namun halaman tersebut diaplikasikan dalam bentuk konten email. PHP menyediakan fungsi mail() dalam proses pengiriman email. Namun anda perlu menyertakan Content-Type: text/html yang diletakkan pada variabel $header agar konten email didefiniskan dalam bentuk HTML.

1

$mail = mail($to, $subject, $message, $headers); 

Fungsi mail(), merupakan fungsi PHP untuk mengirimkan email kepada email yang dituju. Fungsi ini melewatkan berbagai variabel seperti $to untuk email tujuan, variabel $subject untuk tema isi email, variabel $message sebagai isi pesan. Pada variabel $headers inilah, terdapat beberapa komponen yang harus disertakan seperti nama pengirim, email pengirim, serta jenis konten yang akan dikirim. Untuk pengiriman email dengan teks sederhana menggunakan Content Type: text/plain. Namun jika mengirimkan pesan dalam bentuk tags HTML menggunakan Content Type: text/html.

Untuk membuat sebuah konten email dengan dilengkapi tags HTML, pada dasarnya sama seperti pembuatan halaman HTML. Anda hanya perlu mengawalinya dengan tags dan mengakhirinya dengan tags . Konten email diletakkan pada bagian body halaman dengan menyertakan tags dan . Pada bagian inilah Anda menuliskan konten email.

Saat melakukan styling, Anda dapat melakukannya secara embedded. Cara ini dilakukan dengan meletakkan style secara langsung (direct inline style) pada tags yang bersangkutan. Misalnya

Onphpid – Baiklah pada tutorial php cara membuat website bagian ke 5 kita akan membuat template form login dengan bootstap agar halaman login terlihat cantik sehingga enak dipandang dengan memanfaatkan fitur bootstrap, form login akan lebih mudah dibuat dibandingkan kita membuat template sendiri. Perlu diketahui bahwa tamplian merupakan nilai plus pada pembuatan website karena berpengaruh pada pengguna saat menggunakan website yang kita buat.

Mungkin kalian perlu membaca tutorial Membuat Form login dengan bootstrap dan PHP sebelum melanjutkan cara membuat website bagian kedua.

Cara Membuat Website bagian Kedua

Sebelum kita lanjutkan ada baiknya kalian baca (bagi yang belum membaca) tutorial php cara membuat website bagian ke empat bagi yang belum membacanya. Karena tutorial php ini adalah lanjutan dari tutorial sebelumnya atau dengan kata lain ini adalah tutorial php cara membuat website series. Nah pada bagian ini kita memerlukan framework css dari bootstrap karena kita akan belajar bootstrap dan dapat kalian download dari situs bootstrap secara langsung. Setelah didownload silahkan ekstrak di folder assets yang sudah dibuat sebelumnya. Dan selanjutnya download jQuery dari google library atau situs jQuery langsung. Dan buatlah folder atau direktori baru di dalam assets dengan nama jquery, hal ini dilakukan agar file dan folder dapat terorganisir dengan baik.

Untuk langkah-langkah membuat website kita akan memulai dengan membuat file login.css pada folder assets dan bisa dibiarkan kosong. File login.css ini akan kita gunakan untuk menambah style custom selain bootstrap, sehingga kita tidak perlu merubah-rubah isi dari bootstrap sendiri, tentunya ini mempermudah kita dalam membuat website.

Berikut struktur direktori yang baru setelah kita tambah dengan bootstrap:

Langkah kedua silahkan ganti script yang ada di dalam file login.php dengan scrpit berikut:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

<?php

/**

* Cara Membuat Website

*/

?>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

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

<title>Halaman Login</title>

<link rel="stylesheet" href="./../assets/bootstrap/css/bootstrap.min.css"/>

<link rel="stylesheet" href="./../assets/login.css"/>

</head>

<body>

<div class="container">

    <div class="row">

        <div class="col-md-offset-4 col-md-4 login-from">

            <h4><em class="glyphicon glyphicon-log-in"></em>  Halaman Login</h4>

            <?php

            /**

             * Pesan Error Bila terjadi kegagalan dalam login

             */

            if (isset($_GET['error']) && $_GET['error'] == 'salah') {

                echo '<div class="alert alert-warning alert-dismissible" role="alert">

                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                        <strong>Wrong ! </strong> Username dan Password tidak ditemukan

                       </div>';

            }?>

            <form action="check-login.php" method="post">

                <div class="form-group">

                    <label for="">Username</label>

                    <input type="text" class="form-control" name="username" placeholder="Username"/>

                </div>

                <div class="form-group">

                    <label for="">Password</label>

                    <input type="password" class="form-control" name="password" placeholder="Password" />

                </div>

                <div class="text-right">

                    <button class="btn btn-primary">Login</button>

                </div>

            </form>

            <p class="return-home"><a href="./../"><em class="glyphicon glyphicon-menu-left"></em>Halaman Depan</a></p>      

        </div>

    </div>

</div> <!-- End container -->

    <!-- Script js -->

    <script src="./../assets/jquery/jquery.min.js"></script>

    <script src="./../assets/bootstrap/js/bootstrap.min.js"></script>

    <!-- End Script -->

</body>

</html>

Dapat kita lihat pada tutorial bootstrap di atas bahwa yang kita ambil adalah bootstrap.min.css, hal ini dilakukan agar website yang kita buat lebih ringan, karena ukuran bootstrap.min.css lebih kecil dari bootstrap.css. Kemudian dibawahnya kita letakkan login.css hal ini dilakukan agar selector yang sudah diset pada bootstrap ter-reset sehingga memiliki properti yang baru.

Pada line berikutnya kita juga menggunakan jquery.min.js yang bisa diperoleh dari google library atau situs jquery sendiri, karena script bootstrap.min.js tidak bisa berjalan tanpa jquery.min.js tersebut. Dan karena itu juga jquery.min.js ini diletakan di atas bootstrap.min.js. dan kenapa diletakkan di atas tag </body>. Hal ini dilakukan agar browser membaca script js ini belakangan sehingga tidak mengganggu script css-nya.

Kemudian pada file login.css di isi dengan script css berikut :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

.login-from {

    margin-top: 80px;

    border: 1px solid #ddd;

}

.login-from h4 {

    font-size: 26px;

    margin-bottom: 20px;

    margin-top: 20px;

}

p.return-home {

    margin: 20px 0;

}

Adapun fitur – fitur dari bootstrap yang kita pergunakan dalam template login, seperti css form , glyphicon dan grid system yang memungkinkan template website yang kita buat responsive. Artinya dapat menyesuaikan ukuran layar baik layar Monitor, Laptop, Tablet maupun mobile.

Contoh CSS From dari bootstrap adalah “.form-control” dibaca class form-control yang peruntukan untuk tag input dan select kemudian .btn sebagai style button (tombol). Di dalam bootstrap tersedia .btn-primary, .btn-warning, .btn-danger, dan .btn-success.

Sedangkan untuk grid system bootstrap kita menggunakan .col-md-4 dan .col-md-offset-*. Artinya ruang dalam tag div lebarnya akan dibagai 4 dari totalnya yakni 12. Dan glyphicon adalah icon-icon yang sengaja disediakan oleh bootstrap agar kita lebih mudah dan tidak perlu susah-susah mencari icon untuk website kita. Nah di sini kita tidak akan membahas terlalu banyak tetang bootstrap kalian bisa membaca dokumentasi secara langsung di getbootstrap.com atau baca Belajar Bootstrap: Mengenal System Grid Bootstrap 3.

Untuk menguji hasil membuat form login kita,  silahkan buka http://localhost/website/admin

kurang lebih hasil seperti ini

Sekian dulu tutorial php cara membuat website bag. Mempercantik halaman login dengan bootstrap nantikan tutorial cara membuat website berikutnya dan jangan lupa untuk LIKE FANS PAGE onphpid untuk info lebih lanjut. Serta jangan lupa komentarnya.