Anda di halaman 1dari 17

MAKALAH PROJECT WEB PROGRAMMING I

PEMBUATAN SISTEM INFORMASI BERBASIS WEB


“LAPAK BUKU”

Tim Penyusun :
Sholah Faridudin (19221467)
Abdallah Nasir Al hamud (19221447)
Irgi Hikmah Romadan (19221153)
Muhammad Adam Malik (19221468)
Wulan Anggraeni (19220386)
Winda (19220197)

PROGRAM STUDI SISTEM INFORMASI


FAKULTAS TEKNIK & INFORMATIKA
UNIVERSITAS BINA SARANA INFORMATIKA
KAMPUS KOTA SUKABUMI
2023
KATA PENGANTAR

Dengan menyebut nama Allah SWT yang Maha Pengasih lagi Maha
Penyayang, kami panjatkan puja dan syukur atas kehadirat-Nya, yang telah
melimpahkan rahmat, hidayah, dan inayah-Nya kepada kami, sehingga kami dapat
menyelesaikan makalah tugas project ini sampai dengan selesai. Makalah ini di
susun untuk memenuhi tugas akhir mata kuliah web programming 1.
Makalah ini telah kami susun dengan semaksimal mungkin dan mendapat
bantuan dari berbagai pihak sehingga dapat memperlancar pembuatan makalah ini.
Untuk itu kami mengucapkan banyak terimakasih kepada semua pihak yang telah
berkontribusi dalam pembuatan makalah ini.
Terlepas dari semua itu, kami menyadari sepenuhnya bahwa masih banyak
kekurangan baik dari segi susunan kalimat maupun tata bahasa penulisan. Oleh
karena itu dengan tangan terbuka kami menerima segala saran dan kritik dari
pembaca yang kemudian akan kami jadikan sebagai bahan evaluasi.
Akhir kata, kami berharap semoga makalah ini dapat memberikan manfaat
maupun inspirasi terhadap pembaca dan diterima sebagai ide/gagasan yang
menambah kekayaan intelektual bangsa.

Sukabumi, 01 Juli 2023

Penulis
DAFTAR ISI

KATA PENGANTAR……………………………………………………………..................…………... I

DAFTAR ISI………………………………………………………………….……...……………….. II
BAB I PENDAHULUAN
1.1 Latar Belakang…………………………………………………………………………………… 1
1.2 Rumusan Masalah……………………………………………………………………………….. 1
1.3 Tujuan……………………………………………………............................................................. 1
1.4 Manfaat……………………………………………………………………………………………1
BAB II PEMBAHASAN
2.1 Tema Website……………………………………………………………………………………...3
2.2 Pengertian Dan fungsi HTML………………………………………………..................................4
2.3 Program lapak buku………………………………………………………...……………………...5
BAB III PENUTUP
3.1 Kesimpulan………………………..……………………………………..………………………15
BAB 1
PENDAHULUAN

1.1 Latar Belakang


Teknologi semakin pesat dan ilmu pengetahuan semakin luas meruba pola aktivitas
manusia masa kini,salah satunya yaitu aktivitas jual beli. Pada saat ini transaksi jual beli
tidak selalu harus bertatap muka antara pihak penjual da pembe;I serta tidak terbatas oleh
waktu,seperti terjadi pada proses pemesanan dan penjualan buku secara online. Pembeli
cukup melihat dan memilih buku yang akan dibelinya dan membayar sesuai dengan
prosedur yang ditentukan oleh penjual kemudian buku akan dikirim ke alamat yang di
inginkan. Sistem penjual seperti ini sangat efektif dan efisien karena penjual tidak harus
berjualan secara fisik dan tanpa ada batas waktu, hal ini disebabkan karena website dapat
diakses dimanapun dan kapanpun. Sistem penjualan seperti ini juga disebut E-commerce
atau sering disebutpenjualan online. E-commerce sangat cock sebagai media penjualan
sekaligus promosi dengan cakupan wilayah yang sangat luas.

Buku yang ditawarkan oleh sebuah lapak buku mempunyai nilai jual yang kompetitif
tetapi karena terhambat oleh promosi yang hanya mencakup daerah lokal mejadikan
buku-buku ini kurang dikenal dan akibatnya kurang laku dipasaran. Oleh karena itu
dibutuhkan sebauh lapak buku online untuk membantu memasarkan buku yang ditawrkan
oleh lapak tersebut.

1.2 Rumusan Masalah


Berdasarkan latar belakang tersebut maka dapat diambil perumusan masalah yaitu
“Bagaimana membuat lapak online untuk penjualan dan pemesanan buku sebagai media
promosi jual beli buku secara online ?”.
1.3 Tujuan
Adapun tujuan dari makalah ini adalah untuk membuat lapak online untuk pemesanan
dan penjualan buku dengan fasilitas pemesanan buku menggunakan metode pembayaran
melalui transfer Bank dan COD (Cash On Delivery).
1.4 Manfaat
Manfaat-manfaat yang penulis harapkan dari penyusun tugas akhir ini antara lain :
a. Untuk penulis :
Penyusun tugas Akhir ini merupakan wadah penulis untuk menerapkan ilmu-ilmu yang
penulis peroleh selama proses belajar dibangku kuliah ,serta sebagai fortofolio penulis
yang dapat diajadikan referensi ketika mencari pekerjaan dikemudian hari.
b. Untuk Pengguna :
Pengguna diharapkan memiliki lapak online sebagai media jual beli buku dan
produk,akhir dari tugas akhir ini diharapkan dapat memberikan kemudahan bagi
pengguna untuk mempromosikan buku secara online.

BAB II
PEMBAHASAN

2.1 Tema Website


Lapak buku terdiri dari dua kata yang memiliki arti yang berbeda. Kata ‘Lapak’
memiliki arti yaitu tempat berjualan dan kata ‘Buku’ memiliki pengertian yaitu kumpulan
kertas atau bahan lainnya yang dijilid menjadi satu pada salah satu ujungnya dan berisi
tulisan atau gambar. Setiap sisi dari sebuah lembaran kertas pada buku disebut sebuah
halaman. Seiring dengan perkembangan dalam dunia informatika,kini dikenal pula istilah
e-book (buku elektronik), yang mengandalkan komputer dan internet (jika aksesnya
online). sehingga Lapak Buku dapat diartikan sebagai tempat untuk berjualan buku.
Lapak buku pada masa kini tidak lagi hanya melulu tempat berjualan buku tetapi juga
sudah bergeser kearah yang lebih baik lagi yaitu sebagai “studio kreatif- dapat
mengeplorasi berbagai macam hal dari dunia pembukuan baik yang terbentuk tradisional
maupun yang modern (e-book/online system). kini budaya membaca makin diminati oleh
masyarakat luas. Trend tersebut dapat dikatakan lintas generasi/umur,lintas ras,lintas
ekonomi, dan lintas gender. Semua orang membutuhkan buku,baik buku sebagai
penghibur,pengetahuan sains,pengetahuan umum,dan lain sebagainya.
Oleh sebab sesuai dengan tema yang kami dapatkan untuk project akhir untuk mata
kuliah WEB PROGRAMMING ini. Kami membuat sebuah Website lapak buku online.
Terdiri dari beberapa kategori buku yang bisa dipilih bebas. Website ini hanya berbentuk
tampilan, sehingga tidak ada database yang dibuat.

2.2 Pengertian dan Fungsi HTML


HTML adalah singakatan dari Hypertext Markup Language yaitu bahasa
pemrograman standar yang digunakan untuk membuat sebuah halaman web,yang
kemudian dapat diakses untuk menampilkan berbagai informasi didalam sebuah
penjelajah web internet (Browser). HTML juga dapat diguanakan sebagai link link atau
file file dalam situs atau dalam komputer dengan menggunakan localhost,atau link yang
menghubungkan antar situ dalam dunia internet.
HTML merupakan sebuah bahasa yang bermula bahasa yang sebelumnya dipakai
didunia pencetakan dan penerbitanyang doisebiut standar Generalized Markup Language
(SGML).
Sekarang ini HTML merupakan standart internet yang dikendalikan dan didefinisikan
pemakaiannya oleh Word Wide Web Consortium(W3C). pada tahun 1989, HTML dibuat
oleh kolaborasi berners-lee Robbert dengan Caillau TIM pada saat mereka bekerja di
CERN (CERN merupakan lembaga penelitian fisika energi tinggi din janewa).
HTTP atau Hypertext Tranfer Protokol merupakan protokol yang digunakan untuk
mentransfer data atau document yang berformat HTML dari web server ke web browser.
Dengan HTTP inilah yang memungkinkan Anda menjelajah inter dan melihat halaman
web.
Fungsi HTML (Hypertext Markup Language)
HTML (hypertext Markup Language) adalah suatu bahasa yang menggunakan
tanda-tanda tertentu (tag) untuk menyatakan kode-kode yang harus ditafsirkan oleh
browser agar halaman tersebut dapat ditampilkan secara benar.
Secara umum, fungsi HTML adalah pengelola serangkaian data dan informasi
sehingga suatu document dapat diakses dan ditampilkan di internet melalui layanan web.
Fungsi html yang lebih spesifik yaitu :
1) Membuat halaman web.
2) Menampilkan berbagai informasi di dalam sebuah browser internet.
3) Membuat link menuju halaman web lain dengan kode tertentu (hypertex).
2.3 Program Lapak Buku
A . Tampilkan Web dan Submenunya
1. Beranda
Pada beranda ini ditampilkan beberapa submenu seperti daftar buku,untuk melihat
katalog,alamat kami untuk melihat alamat detail lapak buku. Dilanjutkan dengan banner
dibawah sub menu dan beberapa tulisan penyambut untuk pengunjuang.
2. Daftar Buku
Pada submenu ini,menampilkan kategori buku
Untuk menampilkan kategori buku klik kategori buka seprti gambar di bawah

3. Deskripsi Buku
Ketika pengguna mengklik tombol “klik untuk membaca” Maka akan muncul beberapa
buku yang dapat di baca , juga ada penjelasan tentang buku buku tersebut.
B. Untuk script HTML pada tiap tampilannya
-HTML
1.Profil Tim Pembuat Website
Pada bagian ini terdapat beberapa info tentang profil sosial media yang ditampilkan seperti
poto poto pembuat website.
<html>
    <head>
        <title>LETERASI</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
      <div class="container">
      <!-- navigation bar -->
      <div class="container-navbar">
        <ul class="ul-navbar">
         <li class="li-navbar">
          <a href="index.html" class="a-navbar" >HOME</a>
         </li>
         <li class="li-navbar">
          <a href="abaout.html" class="a-navbar" >BUKU</a>
         </li>
         <li class="li-navbar">
          <a href="content.html" class="a-navbar" >TIM PEMBUAT
WEBSITE</a>
         </li>
         </ul>
      </div>
      <!-- navigation selesai -->

      <!-- content 1 -->


    <div class="container-content">
      <a href="https://youtu.be/de86MG0bKmI "
      class="a-content">
        <img
src="https://pbs.twimg.com/media/DpNiWO7UcAUQKEq.png:large"
class="a-content" />
        <p>KLIK DI SINI UNTUK MELIHAT </p>
      </a>

    </div>
      <!-- content 1 end -->

      <!-- footer -->


      <div class="container-footer">
        <h1 class="h1-footer">website ini di buat dengan penuh
semangat</h1>

      </div>
      <!-- footer end -->
    </div>
    </body>
</html>

2.Beranda (index.html)
<html>
    <head>
        <title>LETERASI</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
      <div class="container">
      <!-- navigation bar -->
      <div class="container-navbar">
        <ul class="ul-navbar">
         <li class="li-navbar">
          <a href="index.html" class="a-navbar" >HOME</a>
         </li>
         <li class="li-navbar">
          <a href="abaout.html" class="a-navbar" >BUKU</a>
         </li>
         <li class="li-navbar">
          <a href="content.html" class="a-navbar" >TIM PEMBUAT
WEBSITE</a>
         </li>
         </ul>
      </div>
      <!-- navigation selesai -->
      <!-- content 1 -->
    <div class="container-content">
      <a href="https://youtu.be/de86MG0bKmI "
      class="a-content">
        <img
src="https://pbs.twimg.com/media/DpNiWO7UcAUQKEq.png:large"
class="a-content" />
        <p>KLIK DI SINI UNTUK MELIHAT </p>
      </a>

    </div>
      <!-- content 1 end -->

      <!-- footer -->


      <div class="container-footer">
        <h1 class="h1-footer">website ini di buat dengan penuh
semangat</h1>

      </div>
      <!-- footer end -->
    </div>
    </body>
</html>

4. Daftar buku(kategori.html)
<html>
    <head>
        <title>LETERASI</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
      <div class="container">
      <!-- navigation bar -->
      <div class="container-navbar">
        <ul class="ul-navbar">
         <li class="li-navbar">
          <a href="index.html" class="a-navbar" >HOME</a>
         </li>
         <li class="li-navbar">
          <a href="abaout.html" class="a-navbar" >BUKU</a>
         </li>
         <li class="li-navbar">
          <a href="content.html" class="a-navbar" >TIM PEMBUAT
WEBSITE</a>
         </li>
         </ul>
      </div>
      <!-- navigation selesai -->

      <!-- content 1 -->


    <div class="container-content">
      <a href="https://youtu.be/de86MG0bKmI "
      class="a-content">
        <img
src="https://pbs.twimg.com/media/DpNiWO7UcAUQKEq.png:large"
class="a-content" />
        <p>KLIK DI SINI UNTUK MELIHAT </p>
      </a>

    </div>
      <!-- content 1 end -->

      <!-- footer -->


      <div class="container-footer">
        <h1 class="h1-footer">website ini di buat dengan penuh
semangat</h1>

      </div>
      <!-- footer end -->
    </div>
    </body>
</html>

-CSS
1. Style.css (menyangkup untuk index.html,kategori.html,kontak.html)

*,
html {
    margin:0;
    padding: 0;
}

.container {
   

}
.container-navbar {
    background-color:rgb(20, 137, 220);
    width: 100%;
    height: 20vh;

.ul-navbar {
display: flex;
height: 100px;
justify-content: center;
align-items: center;
}

.li-navbar {
list-style-type: none;
padding: 20px;
margin: 10px;
color:cyan;
font-size: 30px;
}

.li-navbar:hover {
    background-color:aliceblue;
    transition:.5s ease-in-out;
    transition-delay: .3s;
    border-radius: 8px;
}

.a-navbar {
    color:black;
    text-decoration: none;
    font-weight: 800
}

.container-content {
    background-color:cyan;
    display: flex;
    justify-content: content;
    align-items: center;
    height: 50vh;
}

.a-content {
    background-color:palegreen;
    color           :aliceblue;
    text-decoration :none;
    font-size       :15px;
    width           :400px;
    height          :300Px;
    display         :flex;
    flex-direction  :column;
    justify-content :space-evenly;
    align-items     :center;  
    border-radius   :40px;
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

.img-content {
width: 80%;
height: 70%;
}

.container-footer {
    height: 100px;
    background-color:rgb(20, 137, 220);
    display: flex;
    justify-content: center;
    align-items:center;
}

.h1-footer {
font-size: 20px;
color:rgb(255, 255, 255);
justify-content: center ;

BAB III
PENUTUP

3.1 Kesimpulan
Kesimpulan Berdasarkan pembahasan pada bab bab sebelumnya, mala penyusun
menarik kesimpulan pada sistem baru yang telah dibuat antara lain sebagai berikut :
1) Pengolahan data berbasis web dapat mengurangi penggunaan kertas sebagai
penyimpan data dan lebih sitematis.
2) Pencarian data sudah dapat dilakukan dengan cepat.
3) Perubahan data sudah dapat dilakukan dengan mudah dan cepat.
4) Adanya sistem informasi yang terkomputerisasi, penyimpanan data lebih efisien dan
informasi yang disajikan juga akan lebih akurat,tepat waktu,dan relevan.

Anda mungkin juga menyukai