Membuat Website Profile Perusahaan IT Dengan Materialize CSS Framework dan PHP

Tampilan Website relnas-telecom.co.nr
Kelompok Softskill Pengantar Web Science :

Alamat Website : 1. Relnas-Telecom.co.nr atau
                             2. Relnas-Telecom.esy.es
  1. Alan Adi Prastyo (59413960)
  2. Ryan Aditya Pratama (58413142)
  3. Satiya Waraputra (58413296)
Pada era yang dewasa ini, tentu kita sering mengunakan website sebagai sarana mencari informasi dan memberi informasi secara cepat dan efisien. pada saat ini banyak sekali framework yang bagus dengan desain yang elegan dan ringan serta mendukung banyak platform sehingga mudah untuk di terapkan di banyak website.
  • Cara mengunakan Materialize CSS Framework 

Sebelum kita membahas bagaimana mengunakan materialize css framework. saya akan memberi tahu apa itu Materilize css fremework?
Materialize CSS Framework adalah kerangka modern responsif front-end berdasar material desain, sehingga mempermudah developer untuk mengembangakan website dan untuk penguna lebih mudah dalam mengunakan website karena sifatnya yang responsif.
Download Materialize CSS !!

Struktur Project Website
Pada Website Relnas-Telecom.co.nr atau Relnas-Telecom.esy.es terdapat bebrapa menu diantaranya
  • Beranda
  • Layanan ( Internet, Network dan Data Center)
  • Tentang (berisi biodata pembuat/CEO webiste Relnas Telecom :D )
  • Dokumentasi (berisi video tentang internet, network dan datacenter)
  • Kontak (fasilitas untuk memberikan komentar/saran/masukan ke Admin)
Membuat Navbar pada Website Relnas Telecom
<!DOCTYPE html>
<html lang="en">
<head>
<noscript>
<meta http-equiv="refresh" content="application/activemessage" />
</noscript>
<meta name="title" content="Relnas Telecom">
<meta name="description" content="Relnas Telecom adalah Perusahaan Penyedia Layanan Jaringan dan Penyedia Layanan Server Virtual">
<meta name="keywords" content="Penyedia Layanan Jaringan , Data Center, Server Virtual, Depok, Jakarta">
<meta name="robots" content="index,nofollow">
<meta name="author" content="Relnas-Telecom">
<meta name="copyright" content="Mei 2015">
<meta name="title" content="Relnas-Telecom">
<link rel="icon" href="images/favicon.ico" type="image/png">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0 user-scalable=no">
<title>Relnas Telecom | Penyedia Layanan Jaringan</title>
<link href="assets/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection">
    <link href="assets/css/style.css" type="text/css" rel="stylesheet" media="screen,projection">
</head>
<body>
<nav class="green darken-1" role="navigation">
<div class="container-wide-footer">
<div class="nav-wrapper"><a href="<?php $url; ?>index" id="logo-container" class="brand-logo "><img src="images/logo2.png">Relnas Telecom</a>
            <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
<?php
                include ("menu.php");
            ?>    
</div>
</div>
</nav>

 Output Code HTML diatas :


Tampilan Website Relnas Telecom Responsive terhadap semua device


  • Tampilan melalui PC / Laptop
tampilan via desktop
  • Tampilan melalui smartphone (android OS)
tampillan via smartphone
  • Membuat Contact-Us mengunakan Materialize CSS
nama file : contact-us.php


<div class="section no-pad" style="margin-top: -2%;">
    <div class="container-fit">
        <div class="section no-pad grey lighten-5 z-depth-2" style="padding-bottom: 50px;">
            <div class="section border-color green darken-2 waves-effect waves-light">
                <h4 class="header center white-text">Contact Us</h4>
            </div>
            <div class="container-wide-footer">
                <div class="section"></div>
                <div class="section">
                    <div class="row">
                        <form class="col s12" METHOD="post" action="contact.php">
                            <div class="row">
                                <div class="input-field col s12 m4 center-on-small-only">
                                    <i class="mdi-action-account-circle prefix"></i>
                                    <input name="nama" id="icon_prefix" type="text" class="validate" required>
                                    <label for="icon_prefix">Nama</label>
                                </div>
                                <div class="input-field col s12 m4 center-on-small-only">
                                    <i class="mdi-communication-phone prefix"></i>
                                    <input name="telepon" id="icon_telephone" type="tel" class="validate">
                                    <label for="icon_telephone">Telepon</label>
                                </div>
                            </div>
                            <div class="row">
                                <div class="input-field col s12 ">
                                    <i class="mdi-communication-email prefix"></i>
                                    <input name="email" id="email" type="email" class="validate" required>
                                    <label for="email" data-error="wrong" data-success="right">Email</label>
                                </div>
                            </div>
                            <div class="row">
                                <div class="input-field col s12 ">
                                    <i class="mdi-maps-place prefix"></i>
                                    <input name="alamat" id="address" type="text" class="validate">
                                    <label for="address">Alamat</label>
                                </div>
                            </div>
                            <div class="row">
                                <div class="input-field col s12">
                                    <i class="mdi-content-create prefix"></i>
                                    <textarea name="pesan" id="textarea" class="materialize-textarea" required></textarea>
                                    <label for="textarea">Pesan</label>
                                </div>
                            </div>
                            <div class="row">
                                <div class="input-field col s12">
                                    <button class="btn waves-effect waves-light right" type="submit"  value="send">Kirim
                                        <i class="mdi-content-send right"></i>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

  • Pada tag <form> terdapat method="Post" action="contact.php"
Pada kode HTML tersebut semua inputan pada contact-us akan diarahkan ke file contact.php 

contoh file : contact.php
<?php
include ("connect.php");
$stop=0;
$send=1;
$ip=$_SERVER['REMOTE_ADDR'];
if($ip == "127.0.0.1"){
$send=0;
}
$sql = mysql_query("select email from nama_table where id='1'");
$data=mysql_fetch_array($sql);
$email_admin=$data['email'];
$nama=$_POST['nama'];
$telepon=$_POST['telepon'];
$email=$_POST['email'];
$alamat=$_POST['alamat'];
$pesan=$_POST['pesan'];
$headers="From: $nama<$email>";
$waktu=date("d M Y");
if ($send==1) {
$query = mysql_query("insert into nama_tabel values('', '$nama', '$telepon', '$email', '$alamat', '$pesan', '$waktu')");
$sent=mail($email_admin, $nama, $pesan, $headers);
if($query){
header("location:contact-us.php");
}
}
?>
Pada file contact.php terdapat include ("connect.php"); itu artinya anda harus membuat file connect terlebih dahulu, untuk lebih jelasnya ke SINI
Pada sintaks diatas berfungsi untuk memproses data yang dimasukkan ke contact-us.php kemudian akan dimasukan kedalam database dan akan dikirimkan ke E-mail Admin.
  • Conclusion
Dengan adanya tugas membuat website ini kami sengaja membuat dari awal website dan tidak mengunakan CMS karena kami berpendapat "kalau ingin mengerti sebuah sistem maka harus mempelajari dari dasar" dengan pendapat tersebut kami membuat website yang terbaru mengunakan materialize css framework, sebelumnya saya juga pernah ikut lomba KOMPRES yang diselengarakan LABTI 2014 dan Alhamdulillah dapat juara 2, sehingga dalam membuat tugas website kali ini, tidak terlalu susah bagi kami. Semoga untuk kedepannya kami lebih produktif dalam meningkatkan kemampuan dan saya berharap website kami bisa bermanfaat untuk orang lain sebagai refrensi.

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)