Membangun Portal untuk Sekolahan
A. Pengertian
Portal web adalah situs web yang menyediakan kemampuan tertentu yang dibuat sedemikian rupa mencoba menuruti selera para pengunjungnya. Kemampuan portal yang lebih spesifik adalah penyediaan kandungan informasi yang dapat diakses menggunakan beragam perangkat, misalnya komputer pribadi, komputer jinjing (notebook), PDA (Personal Digital Assistant), atau bahkan telepon genggam.
B. Latar Belakang
Portal Web mulai populer pada akhir tahun 1990. Setelah perkembangan perambah web (web browser) pada pertengahan tahun 1990, banyak perusahaan mencoba membangun portal untuk mendapatkan perolehan pasar mereka melalui Internet. Portal web mendapat perhatian khusus karena bagi banyak pengguna, portal web merupakan halaman awal yang dibuka oleh perambah web mereka. Netscape Netcenter telah menjadi bagian dari America Online, Walt Disney meluncurkan Go.com, dan Excite telah menjadi bagian dari AT&T di akhir 1990-an.
Banyak portal yang mengawali keberadaan mereka baik sebagai penyedia direktori Internet maupun fasilitas mesin pencari (Excite, Lycos, AltaVista, infoseek, dan Hotbot adalah beberapa layanan yang tertua dari yang ada). Ekspansi cakupan layanan dilakukan sebagai strategi untuk mengamankan basis pengguna dan memperpanjang masa kunjungan pengguna pada suatu portal. Layanan yang membutuhkan pendaftaran seperti email gratis, fitur tertentu, dan chatroom dianggap mampu mendorong kunjungan yang berulang pada suatu portal. Game, chat, email, berita, dan layanan lain juga bertujuan agar pengunjung tinggal lebih lama, di mana hal tersebut akan menambah penghasilan iklan.
C. Maksud dan Tujuan
Tujuan utama sebuah Web portal adalah membangun komunitas yang mana penguna lebih mudah masuk ke webside seperti webside sekolah dan webside lain - lainya .
D. Alat dan Bahan
- Laptop Atau PC
- Notepad , ++ , Sublime text ,dan lain-lain.
Pada kali ini saya akan memberi tau cara membuat Portal untuk sekolahan :
Langkah Pertama :
Membuat tampilan awal atau layout nya ,
sekiranya begitu tampilan awal portal , ini adalah bentuk dummy , atau rangakain dari pembuatan portal , digunakan untuk mendesaign portal jika kalian melewati langkah berikut . kalian pasti kebinggungan waktu mengerjakan portal .
Source Code
disini saya akan membagikan source code yang sudah kita buat :
index.php
<!DOCTYPE html>
<html>
<head>
<title>Portal SMKN 1 Mejayan</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta name="description" content="Ini Adalah Portal Dari SMK Negeri 1 Mejayan">
<meta name="author" content="Bima Zainudin Ikhsan">
<meta name="keyword" content="Portal smk">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link rel="shortcut icon" href="assets/img/smk1mejayan.png">
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/jquery.backstretch.min.js"></script>
</head>
<body>
<div class="transparant"></div>
<center>
<br>
<h2 style="font-family: raleway">
SMK Negeri 1 Mejayan
<center><img class="cover" src="assets/img/smk1mejayan.png"></center></h2>
<p style="font-size: 20px;color: white;margin-top: -2%"> Jl. Imam Bonjol No. 7 Pandean, Kec. Mejayan Kab. Madiun<br>
Kodepos <b style="font-family: lato">63153</b> Jawa Timur
Telp : <b style="font-family: lato">(0351) 388-490</b></p>
</h4>
</center>
<div class="container">
<div class="three columns">
<div class="bungkus twelve columns">
<center>
<img style="width: 80%;margin: 0" class="gambar" src="assets/img/png/graduate.png">
</center>
</div>
<br>
<a href="http://smkn1mejayan.us.to/mySchool" target="new"><button style="width: 100%" class="button">WEBSITE SMK</button></a>
</div>
<div class="three columns">
<div class="bungkus twelve columns">
<center>
<img style="width: 80%;margin: 0" class="gambar" src="assets/img/png/email-1.png">
</div>
<br>
<button style="width: 100%" class="button">KONTAK</button>
</center>
</div>
<div class="three columns">
<div class="bungkus twelve columns">
<center>
<img style="width: 80%;margin: 0" class="gambar" src="assets/img/png/book.png">
</div>
<br>
<button style="width: 100%" class="button">Perpustakaan</button>
</center>
</div>
<div class="three columns">
<div class="bungkus twelve columns">
<center>
<img style="width: 80%;margin: 0" class="gambar" src="assets/img/png/painting-palette.png">
</div>
<br>
<button style="width: 100%" class="button ">kelas Seni</button>
</center>
</div>
<div class="three columns">
<div class="bungkus twelve columns">
<center>
<img style="width: 80%;margin: 0" class="gambar" src="assets/img/png/football.png">
</div>
<br>
<button style="width: 100%" class="button">Olahraga</button>
</center>
</div>
</div>
<div class="container">
<div class="three columns">
<div class="bungkus twelve columns">
<center>
<img style="width: 80%;margin: 0" class="gambar" src="assets/img/png/student.png">
</div>
<br>
<button style="width: 100%" class="button">Lab TIK</button>
</center>
</div>
<div class="three columns">
<div class="bungkus twelve columns">
<center>
<img style="width: 80%;margin: 0" class="gambar" src="assets/img/png/writing.png">
</div>
<br>
<button style="width: 100%" class="button">PPB Online</button>
</center>
</div>
<div class="three columns">
<div class="bungkus twelve columns">
<center>
<img class="gambar" style="width: 80%;margin: 0" src="assets/img/png/laptop.png">
</div>
<br>
<button style="width: 100%" class="button">Social Media</button>
</center>
</div>
<div class="three columns">
<div class="bungkus twelve columns">
<center>
<img class="gambar" style="width: 80%;margin: 0" src="assets/img/png/smartphone.png">
</div>
<br>
<button style="width: 100%" class="button">Extra kulikuler</button>
</center>
</div>
<div class="three columns">
<div class="bungkus twelve columns">
<center>
<img style="width: 80%;margin: 0" class="gambar" src="assets/img/png/conference.png">
</div>
<br>
<button style="width: 100%" class="button">Pengumuman</button>
</center>
</div>
</div>
<footer>
<p style="color: white">
Copyright © 2017 SMK Negeri 1 Mejayan<br>
Designed BY <a href="#">SMK Negeri 1 Mejayan</a>
</p>
</footer>
</body>
</html>
style.css
style css berisikan unutk memperindah tampilan html di atas , css seperti cat rumah , jika rumah kalian tidak ada cat maka akan terlihat tidak enak di pandang ,sama hal nya dengan css ini , ketika kalian membuat css jagan lupa extensi .css , jika extensi bukan css dan file dalamnya adalah css , maka tidak bisa terdeteksi .
*{
box-sizing: border-box;
}
h2,
h4{
text-align: center;
color: white;
}
body{
font-family: raleway;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
padding: 0;
margin: 0;
color: white;
}
.transparant{
background: rgba(0,0,0,0.6);
left: 0px;
top: 0px;
overflow: hidden;
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
z-index: -999999;
position: fixed;
}
.bungkus{
border-radius: 3px;
width: 100%;
padding: 10px;
border: 1px solid white;
background-color: white;
}
.bungkus:hover{
background-color: rgba(216, 216, 216, 0.54);
}
.cover{
width: 200px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
}
.cover:hover{
-webkit-transform: scale(1.15);
-moz-transform: scale(1.15);
-ms-transform: scale(1.15);
-o-transform: scale(1.15);
transform: scale(1.15);
}
footer{
text-align: center;
font-family: lato;
border-top: 2px solid white;
padding: 10px 0px 1px 0px;
background: black;
}
.slideshow > .image {
position: absolute;
left: 0;
background-size: cover; }
/*Responsive website*/
.container {
position: relative;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box; }
.column,
.columns {
width: 100%;
float: left;
box-sizing: border-box; }
@media (min-width: 400px) {
.container {
width: 85%;
padding: 0; }
}
@media (min-width: 550px) {
.container {
width: 80%; }
.column,
.columns {
margin-left: 2%;
margin-bottom: 2% }
.column:first-child,
.columns:first-child {
margin-left: 0; }
.one.column,
.one.columns { width: 4.66666666667%; }
.two.columns { width: 13.3333333333%; }
.three.columns { width: 18.4%; }
.four.columns { width: 30.6666666667%; }
.five.columns { width: 39.3333333333%; }
.six.columns { width: 48%; }
.seven.columns { width: 56.6666666667%; }
.eight.columns { width: 65.3333333333%; }
.nine.columns { width: 74.0%; }
.ten.columns { width: 82.6666666667%; }
.eleven.columns { width: 91.3333333333%; }
.twelve.columns { width: 100%; margin-left: 0; }
.one-third.column { width: 30.6666666667%; }
.two-thirds.column { width: 65.3333333333%; }
.one-half.column { width: 48%; }
.offset-by-one.column,
.offset-by-one.columns { margin-left: 8.66666666667%; }
.offset-by-two.column,
.offset-by-two.columns { margin-left: 17.3333333333%; }
.offset-by-three.column,
.offset-by-three.columns { margin-left: 26%; }
.offset-by-four.column,
.offset-by-four.columns { margin-left: 34.6666666667%; }
.offset-by-five.column,
.offset-by-five.columns { margin-left: 43.3333333333%; }
.offset-by-six.column,
.offset-by-six.columns { margin-left: 52%; }
.offset-by-seven.column,
.offset-by-seven.columns { margin-left: 60.6666666667%; }
.offset-by-eight.column,
.offset-by-eight.columns { margin-left: 69.3333333333%; }
.offset-by-nine.column,
.offset-by-nine.columns { margin-left: 78.0%; }
.offset-by-ten.column,
.offset-by-ten.columns { margin-left: 86.6666666667%; }
.offset-by-eleven.column,
.offset-by-eleven.columns { margin-left: 95.3333333333%; }
.offset-by-one-third.column,
.offset-by-one-third.columns { margin-left: 34.6666666667%; }
.offset-by-two-thirds.column,
.offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
.offset-by-one-half.column,
.offset-by-one-half.columns { margin-left: 52%; }
}
html {
font-size: 62.5%; }
body {
font-size: 1.5em;
font-weight: 400;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #222; }
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
font-weight: 800; }
@media (min-width: 550px) {
h1 { font-size: 5.0rem; }
h2 { font-size: 4.2rem; }
h3 { font-size: 3.6rem; }
h4 { font-size: 3.0rem; }
h5 { font-size: 2.4rem; }
h6 { font-size: 1.5rem; }
}
p {
margin-top: 0; }
a {
color: #1EAEDB; }
a:hover {
color: #0FA0CE; }
.button{
display: inline-block;
background-color: transparent;
cursor: pointer;
font-family: lato;
height: 38px;
padding: 0 30px;
color: #FFF;
background-color: #0d68b9;
border: 2px solid #33C3F0;
}
.button:focus,.button:hover{
color: black;
background-color: white;
border-color: 2px #1EAEDB;
}
.container:after,
.row:after,
.u-cf {
content: "";
display: table;
clear: both; }
mungkin jika kalian menjalankan kedua file tersebut tidak akan berjalan sempurna karena portalnya belum responsive , jika kalian ingin responsive maka kita akan membahasnya di tutorial selanjutnya !
Kesimpulan :
Membuat portal buat Sekolahan agar Mempermudah pembelajaran siswa atau memberikan sumber informasi siswa .
Refrensi : https://id.wikipedia.org/wiki/Portal_web
No comments:
Post a Comment