Scribd Logo
Unggah

Selamat datang di Scribd!

  • Laprak Pemrograman Web

    Diunggah oleh

    Fauziah
    25 tayangan16 halaman

    Judul Asli

    laprak pemrograman web

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    25 tayangan16 halaman

    Laprak Pemrograman Web

    Diunggah oleh

    Fauziah

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 16

    LAPORAN PRAKTIKUM

    PEMROGRAMAN WEB

    FAUZIAH NUR
    0701202104

    covePROGRAM STUDI ILMU KOMPUTER

    FAKULTAS SAINS DAN TEKNOLOGI


    UNIVERSITAS ISLAM NEGERI SUMATERA UTARA
    MEDAN
    2023
    KATA PENGANTAR

    Assalamualaikum.wr.wb

    Puji syukur kehadirat Allah SWT yang telah memberikan rahmat dan
    hidayah-Nya sehingga saya dapat menyelesaikan makalah ini tepat pada
    waktunya. Adapun tujuan dari pembuatan laporan praktikum ini adalah untuk
    memenuhi tugas dari dosen pada bidang studi Pemrograman Web. Selain itu,
    laporan praktikum ini juga bertujuan untuk menambah wawasan tentang berbagai
    macam materi bagi para pembaca dan juga bagi penulis. Saya mengucapkan
    terima kasih kepada bapak Ari Usman S.T, M.Kom, selaku dosen bidang studi
    Pemrograman Web yang telah memberikan tugas ini sehingga dapat menambah
    pengetahuan dan wawasan sesuai dengan bidang studi yang saya tekuni. Saya juga
    mengucapkan terima kasih kepada semua pihak yang telah membagi sebagian
    pengetahuannya sehingga saya dapat menyelesaikan laporan praktikum ini. Saya
    menyadari, laporan praktikum yang saya tulis ini masih jauh dari kata sempurna.
    Oleh karena itu, kritik dan saran yang membangun akan saya nantikan demi
    kesempurnaan makalah ini.

    Medan 25 Maret 2023


    Penyusun

    Fauziah Nur

    I
    II
    MODUL I

    INSTALASI WEB SERVER DAN HTML

    1.1 Tujuan Praktikum

    1. Mahasiswa dapat membuat desain Web menggunakan HTML.


    2. Mahasiswa dapat mengerti dasar dari pemrograman Web.
    3. Mahasiswa bisa menginstalasi Webserver.

    1.2 Dasar Teori

    Web server adalah serangkaian perangkat keras (hardware) dan perangkat


    lunak (software) di dalam sebuah server. Dari sisi software, yang berfungsi
    sebagai medium untuk menerima permintaan berupa halaman web dalam protokol
    HTTP atau HTTPS. Setelah menerima permintaan, web server akan memuat dan
    mengirim halaman yang diminta untuk disajikan di browser pengguna, misalnya
    Google Chrome, Mozilla Firefox, Safari, dan sebagainya. Sementara dari
    sisi hardware, web server terhubung ke internet untuk bertukar informasi (data
    atau file) di antara perangkat lain yang saling terhubung. Data yang dimaksud bisa
    berupa file HTML, gambar, file JavaScript, atau stylesheet CSS. Perangkat keras
    web server juga berfungsi untuk menyimpan software web server. (Dewaweb
    Team,2023).

    HTML adalah bahasa yang digunakan untuk membuat halaman web. Bagi
    yang berkecimpung di dunia perangkat gadget dan ilmu komputer, pasti sudah
    tidak asing lagi dengan berbagai kode di dalamnya. HTML adalah kependekan
    dari Hypertext Markup Language. (Kurnia Azizah,2021).

    1.3 Praktikum

    1. Instalasi webserver dan notepad++.


    2. Aktifkan webserver.

    1
    2

    Gambar 1.1 Mengaktifkan Webserver

    3. Panggil webserver pada browser di url : localhost/.


    4. Kemudian buat nama domain didirektori C:/XAMPP/htdocs/namadomain.
    5. Buat file html dasar, dan simpan dengan ekstensi .html dan .php . Kode
    program pertama, simpan dengan ekstensi nama Praktikumpertama.html.

     Kodingan pertama ekstensi.html

    Gambar 1.2 Kodingan Praktikumpertama.html


    3

    Script Praktikumpertama.html:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Beranda | Portal Web2</title><!--Tab Browser -->
    </head>
    <body>
    <h2>Selamat datang HTML</h2>

    <body>
    </html>

     Kodingan kedua indeks.php.

    Gambar 1. 3 Kodingan indeks.php


    Script indeks.php:

    <!DOCTYYPE html>
    <html>
    4

    <head>
    <title>Contoh Layout dengan Elemen Semantik</title>
    </head>
    <body>
    <header>
    <h1>Belajar Elemen Semantik di HTML</h1>
    </header>
    <nav>
    <a href="#">Home</a> |
    <a href="#">About</a> |
    <a href="#">Contact</a>
    <nav>
    <article>
    <h1>Tutorial Semantik Elemen untuk Pemula</h1>
    <p>Semantik elemen adalah elemen yang memiliki makna
    dan tujuan.
    Tujuannya agar kode HTML mudah dibaca dan tidak ada
    penyalahgunaan tag.
    Elemen semantik bagus untuk SEO dan juga dapat
    meningkatkan accessibility.
    </p>
    </article>
    <footer>
    Copyright &copy; catatan kaki
    </footer>

    </body>

    </html>

    6. Kode program kedua, simpan dengan nama index.php seperti pada gambar
    dibawah ini.

    Gambar 1.4 File yang telah dibuat

    7. Pada file index klik kanan lalu open with microsoft word, lalu pada microsoft
    word ketik =rand(4,10) seperti gambar dibawah ini.
    5

    Gambar 1.5 Teks acak word

    8. Pada file index.php buatlah kode program seperti dibawah ini.

    Gambar 1.6 Kode program indeks.php 1

    Gambar 1.7 Kode program indeks.php 2

    Gambar 1.8 Kode program indeks.php 3


    6

    9. Untuk membuat kode program pada “Baca Selengkapnya” dapat dilihat


    seperti dibawah ini.

    Gambar 1.9 Kode program fauziah nur

    Terlihat pada <a href=” .php”>Baca Selengkapnya..</a></p> bermaksud


    untuk membuat teks menjadi terpotong dengan menghubungkannya ke file php
    yang lain begitu juga dengan teks yang serupa. Untuk contohnya dapat dilihat
    seperti dibawah ini.

    Gambar 1.10 Kode program fauziah nur

    Gambar 1.11 Kode program fauziah nur


    7

    10. Dan akan memunculkan hasil seperti gambar dibawah ini.

    Gambar 1.12 Hasil localhost


    8

    1.4 Kesimpulan dan Saran

    1. Kesimpulan
    Pada praktikum ini adalah HTML (Hypertext Markup Language) adalah
    bahasa format dari tag XML(Extended Markup Language) yang digunakan
    sebagai standar tampilan dari halaman Web. Webserver merupakan software yang
    digunakan untuk memberikan layanan berupa data yang memiliki fungsi sebagai
    penerima permintaan HTTP/HTTPS dari klien (Chrome, FireFox) yang
    dilanjutkan dengan pengiriman respons mengenai permintaan tersebut yang
    berbentuk web.

    2. Saran
    Yang dapat saya berikan pada praktikum kali ini yaitu pada praktikum kali
    ini dilakukan secara luring, mahasiswa dapat mempelajari melalui berbagai
    sumber tidak hanya memalui dari materi yang di sediakan oleh dosen pengampu.
    LEMBAR PENGESAHAN

    JUDUL : INSTALASI WEB SERVER DAN HTML


    NAMA : FAUZIAH NUR
    NIM : 0701202104
    PROGRAM STUDI : ILMU KOMPUTER

    Medan, 25 MARET 2023

    Menyetujui,

    Asisten Laboratorium

    (Dimas Yudistira)

    Mengetahui,

    Laboran

    (Muhammad Fahri Syuhada,S.Kom)

    9
    10
    MODUL 2

    LAYOUT WEB SEMANTIK

    1.1 Tujuan Praktikum

    1. Mahasiswa mampu memahami teori dasar layout web semantik.


    2. Mahasiswa mampu menjalankan program layout web semantik.
    3. Mahasiswa bisa memanggil hasil dari program layout web semantik.

    1.2 Teori Dasar

    Layout adalah cabang mendasar dari desain grafis yang menyangkut


    pengaturan teks dan visual. Layout mengacu pada pengaturan elemen visual dalam
    kotak untuk menyampaikan pesan tertentu. Fungsi dan tujuan dari layout adalah
    untuk menyajikan berbagai elemen seperti teks dan gambar yang mampu
    berkomunikasi, sehingga mempermudah seseorang untuk memahami dan bisa
    memperoleh informasi dari elemen tersebut. Layout dapat menentukan poin mana
    yang ditekankan dan apakah dokumen tersebut secara estetika menarik untuk
    dilihat. Jika layout tidak terbaca dengan baik oleh orang yang melihatnya, maka
    desainnya menjadi tidak efektif, terlepas dari tampilannya yang menarik
    sekalipun. Sehingga bisa dikatakan bahwa memahami layout adalah kunci dalam
    menciptakan desain yang user-friendly dan menarik, terutama di bidang
    web design dan advertising. (Sylvia Rheny,2002).

    Semantik Web adalah salah satu inovasi yang ada dalam perkembangan
    website di era digital. Dalam pengertian bahasa nya, semantic web adalah website
    yang memiliki makna. Dengan itu dapat diartika bahwa semantic web adalah
    suatu inovasi dalam berbentuk website yang mempunyai knowledge sehingga bisa
    dikatakan mempunyai sifat lebih pintar dari web sebelumnya. Salah satu teknologi
    yang diterapkan dalam pembangunan web semantic dengan data yang ada
    dinamakan Resource Description Framework atau RDF dan Web Ontology
    Language atau OWL. Semantic web juga merupakan bagian dari Web 3.0 yang

    11
    mengunggulkan integrasi data. Maksud dari integrasi data adalah data yang ada
    akan di olah menjadi bentuk metadata sehingga informasi yang dihasilkan
    menjadi informasi yang lebih jelas dan bermakna . (Adam Fahsyah
    Nurzaman,2021).

    1.3 Praktikum

    1. Disain mockup web dengan ms.word.


    2. Buka notepad++.
    3. Buat ccs eksternal dengan nama file styel.css, simpan pada folder yang sama.
    4. Tulis skrip dibawah ini Mockup layout web dengan shape dimensi 960px.
    Jadi halaman index.php akan tampil seperti layout dibawah.

    Gambar 2.1 Desain mockup layout web

    12
    13

    Anda mungkin juga menyukai