PPL (PEMODELAN PERANGKAT LUNAK)

 PEMODELAN PERANGKAT LUNAK

• Apa Itu Pemodelan Perangkat Lunak?

Pemodelan perangkat lunak (software modeling) adalah proses pembuatan model atau representasi dari sistem perangkat lunak yang akan dikembangkan. Tujuan dari pemodelan ini adalah untuk menggambarkan struktur, perilaku, dan interaksi sistem secara jelas dan terperinci, sehingga dapat mempermudah pemahaman dan pengelolaan proyek perangkat lunak. Pemodelan ini sering kali digunakan pada tahap perancangan sistem untuk membantu para pengembang dan pemangku kepentingan dalam memvisualisasikan dan merencanakan sistem

• Macam Macam Pemodelan Perangkat Lunak

Salah satu hal mendasar dari Pemodelan Perangkat Lunak

adalah penggunaan model SDLC atau Software Development Life Cycle. Dirangkum dari laman Educative, jenis model yangpopuler digunakan, di antaranya.

1. Waterfall

Model Waterfall adalah proses berurutan yang digerakkan rencana dan mengharuskan adanya perencanaan dan penjadwalan semua aktivitas sebelum memulai proyek. Setiap aktivitas dalam model ini direpresentasikan sebagai fase terpisah yang disusun dalam urutan linier.

Model ini memiliki beberapa fase, antara lain, persyaratan, desain, penerapan, pengujian, penyebaran, dan pemeliharaan. Model Waterfall memiliki struktur yang kaku, sehingga harus digunakan dalam kasus dengan persyaratan yang dipahami sepenuhnya dan tidak mungkin berubah secara radikal.

2. V Model

V model atau Verification and Validation model merupakan pengembangan dari model Waterfall. Semua persyaratan dikumpulkan di awal dan tidak dapat diubah.

Pada model ini, kamu memiliki aktivitas pengujian yang sesuai untuk setiap tahap. Sementara untuk setiap fase dalam siklus pengembangan, ada fase pengujian yang terkait.

V model mudah dipahami dan memudahkan manajemen proyek. Namun, model ini tak cocok diterapkan untuk proyek kompleks atau proyek yang persyaratannya tidak jelas atau mudah berubah.

3. RAD

RAD atau Rapid Application Development didasarkan pada pengembangan berulang dan pembuatan prototipe dengan sedikit perencanaan yang terlibat. Adapun fase yang ada pada model RAD di antaranya:

Pemodelan bisnis
Pemodelan data
Pemodelan proses
Generasi aplikasi
Pengujian dan pergantian

Meski disebut rumit, model RAD mengakomodasi perubahan persyaratan, mengurangi waktu pengembangan, dan meningkatkan kemampuan penggunaan kembali komponen.

4. Spiral

Model spiral (spiral model) adalah model pengembangan software dimana proses digambarkan sebagai spiral. Setiap loop akan mewakili satu fase dari proses pembuatan/perancangan software. Loop paling dalam berfokus pada kelayakan dari sistem, loop selanjutnya tentang definisi dari kebutuhan, loop berikutnya berkaitan dengan desain sistem dan seterusnya,

5. Agile

Model proses ini mendorong iterasi pengembangan dan pengujian yang berkelanjutan. Setiap bagian inkremental dikembangkan selama satu iterasi. Sementara setiap iterasi dirancang agar kecil dan dapat dikelola sehingga dapat diselesaikan dalam beberapa waktu saja.

Model Agile memiliki pendekatan realistis untuk pengembangan perangkat lunak. Akan tetapi, model ini kurang cocok untuk proyek yang kompleks. Model Agile lebih sesuai diterapkan untuk proyek dengan persyaratan yang berubah.

6. Incremental

Jenis model ini membagi fungsionalitas sistem menjadi peningkatan kecil yang disampaikan satu demi satu secara berurutan. Fungsi yang paling penting diimplementasikan pada tahap awal. Model ini dinilai sesuai untuk proyek dengan persyaratan yang lengkap dan jelas.

7. Itterative

Model Iterative mengembangkan sistem dengan membangun sebagian kecil dari semua fitur. Ini membantu memenuhi cakupan awal dengan cepat dan merilisnya untuk umpan balik.

Model proses ini dimulai dengan bagian dari perangkat lunak, kemudian diimplementasikan dan ditinjau untuk mengidentifikasi kebutuhan lebih lanjut. Model iteratif memudahkan untuk mengidentifikasi dan memperbaiki kekurangan fungsional atau desain.

Selain itu, model proses ini mempermudah pengelolaan risiko dan perubahan persyaratan.

• Tahap Tahap Pemodelan Perangkat Lunak

1.Requirement analyst

Sebelum melakukan pengembangan perangkat lunak, seorang pengembang harus

 mengetahui dan memahami bagaimana informasi kebutuhan penggguna terhadap

sebuah perangkat lunak. Metode pengumpulan informasi ini dapat diperoleh dengan

 berbagai macam cara diantaranya, diskusi, observasi, survei, wawancara, dan

 sebagainya. Informasi yang diperoleh kemudian diolah dan dianalisa sehingga

 didapatkan data atau informasi yang lengkap mengenai spesifikasi kebutuhan

 pengguna akan perangkat lunak yang akan dikembangkan.

2. System And Software Design

Informasi mengenai spesifikasi kebutuhan dari tahap Requirement Analysis

 selanjutnya di analisa pada tahap ini untuk kemudian diimplementasikan pada desain

 pengembangan. Perancangan desain dilakukan dengan tujuan membantu memberikan

gambaran lengkap mengenai apa yang harus dikerjakan. Tahap ini juga akan

 membantu pengembang untuk menyiapkan kebutuhan hardware dalam pembuatan

 arsitektur sistem perangkat lunak yang akan dibuat secara keseluruhan

3.Implementation

Tahap implementation and unit testing merupakan tahap pemrograman. Pembuatan

 perangkat lunak dibagi menjadi modul-modul kecil yang nantinya akan digabungkan

 dalam tahap berikutnya. Disamping itu, pada fase ini juga dilakukan pengujian dan

 pemeriksaan terhadap fungsionalitas modul yang sudah dibuat, apakah sudah

 memenuhi kriteria yang diinginkan atau belum.

4.Intregation

Setelah seluruh unit atau modul yang dikembangkan dan diuji di tahap implementasi

 selanjutnya diintegrasikan dalam sistem secara keseluruhan. Setelah proses integrasi

 selesai, selanjutnya dilakukan pemeriksaan dan pengujian sistem secara keseluruhan

 untuk mengidentifikasi kemungkinan adanya kegagalan dan kesalahan sistem.

5.Operation And Maintenance

Pada tahap terakhir perangkat lunak yang sudah jadi

 dioperasikan pengguna dan dilakukan pemeliharaan. Pemeliharaan memungkinkan

 pengembang untuk melakukan perbaikan atas kesalahan yang tidak terdeteksi pada

 tahap-tahap sebelumnya. Pemeliharaan meliputi perbaikan kesalaha, perabikan

 implementasi unit sistem, dan peningkatan dan penyesuaian sistem sesuai dengan

 kebutuhan.

BOOTSTRAP V : CARDS

CARDS

Apa itu Bootstrap Cards?

Bootstrap Cards adalah komponen yang menampilkan gambar beserta deskripsi dari gambar tersebut beserta judul.

Contoh Codingan dan Hasil Cards :

Coding :

<!DOCTYPE html>

<html lang="en">

  <head>

    <title>Masardhan</title>

    <meta charset="utf-8" />

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

    <link

      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"

      rel="stylesheet"

    />

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

  </head>

  <body>

  <div class="container-fluid mt-3">

      <h3>Top 3 Summit Indonesia</h3>

      <p>

        Bagi para pendaki gunung, menginjakkan kaki di puncak tertinggi di

        Indonesia merupakan sebuah kepuasan tersendiri. Maka tak heran, ada

        istilah 3 puncak (three summits) gunung tertinggi di Indonesia,dan

        inilah daftar gunung berikut

      </p>

    </div>

    <div class="d-flex justify-content-center">

      <div class="card mx-3" style="width: 18rem">

        <img src="puncak-gunungjpeg-20230213030306.jpeg" class="card-img-top" alt="..." />

        <div class="card-body">

          <h5 class="card-title">Gunung Jaya Wijaya</h5>

          <p class="card-text">

            Puncak Jaya Wijaya atau Piramida Carstensz ialah sebuah puncak tertinggi yang menjadi bagian dari Pegunungan Barisan Sudirman

             yang terdapat di Kabupaten Mimika, Provinsi Papua Tengah, Indonesia. Puncak Jaya atau Piramida Carstensz mempunyai ketinggian 4.883 mdpl

             dan di sekitarnya terdapat gletser dengan nama yang sama yakni gletser Carstensz, satu-satunya gletser tropika di Indonesia,

              yang tersisa dan secara perlahan mulai menipis akibat pemanasan global.

          </p>

          <a href="#" class="btn btn-primary">View More</a>

        </div>

      </div>

      <div class="card mx-3" style="width: 18rem">

        <img src="2jpg-33865b703c8b3044721bd03e6c716b17.jpg" class="card-img-top" alt="..." />

        <div class="card-body">

          <h5 class="card-title">Gunung Kerinci</h5>

          <p class="card-text">

            Gunung Kerinci (juga dieja dengan "Kerintji") adalah gunung tertinggi di pulau Sumatra dan gunung berapi tertinggi di Indonesia juga Asia Tenggara.

             Gunung Kerinci terletak di perbatasan Kabupaten Kerinci, Jambi dan Kabupaten Solok Selatan, Sumatera Barat, di Pegunungan Bukit Barisan dengan ketinggian 3.805 mdpl.

              Gunung ini juga menjadi batas antara wilayah Suku Kerinci dengan Etnis Minangkabau yang dikelilingi hutan lebat Taman Nasional Kerinci Seblat, yang merupakan habitat harimau sumatra

               dan badak sumatra

          </p>

          <a href="#" class="btn btn-primary">View More</a>

        </div>

      </div>

      <div class="card mx-3" style="width: 18rem">

        <img src="puncak-gunung-rinjani6.jpg" class="card-img-top" alt="..." />

        <div class="card-body">

          <h5 class="card-title">Gunung Rinjani</h5>

          <p class="card-text">

            Gunung Rinjani adalah gunung yang berlokasi di Pulau Lombok, Nusa Tenggara Barat.

             Gunung yang merupakan gunung berapi kedua tertinggi di Indonesia dengan ketinggian 3.726 mdpl

              serta terletak pada lintang 8º25' LS dan 116º28' BT ini merupakan gunung favorit bagi pendaki Indonesia karena keindahan pemandangannya.

               Gunung ini merupakan bagian dari Taman Nasional Gunung Rinjani yang memiliki luas sekitar 41.330 ha

                dan ini akan diusulkan penambahannya sehingga menjadi 76.000 ha ke arah barat dan timur

          </p>

          <a href="#" class="btn btn-primary">View More</a>

        </div>

      </div>

    </div>

  </body>

</html>

Hasil :

BOOTSTRAP V : NAVIGATION BAR

NAVIGATION BAR

Apa itu Navigation Bar?

NavBar atau navigation bar adalah bagian dari tampilan website yang berisi menu navigasi yang terdiri dari beberapa tautan atau link. Tujuan dari NavBar adalah untuk membantu pengguna dalam navigasi website dan mencari informasi yang diinginkan dengan mudah

Contoh Codingan dan Hasil Navigation Bar :

Coding :

><!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>ARDHAN NAVBAR </title>

   <style>*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: Arial;

}

body{

    background: url(istockphoto-1361203525-612x612.jpg);

    background-size: cover;

    height: 100vh;

    background-position: center;

}

header{

    width:100%;

    height: 100px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    position: fixed;

    z-index: 99;

    box-shadow: 0 0 10px #000;

    background: rgba(0,0,0,0.5);

}

#chk1{

    display: none;

     

     

}

i{

    color: #fff;

    cursor: pointer;

}

header .logo{

    flex: 1;

    color:#fff;

     

    margin-left: 50px;

    text-transform: uppercase;

    font-size: 15px;

}

header .search-box{

    flex: 1;

    position: relative;

}

.search-box input{

    width:100%;

    height: 40px;

    border: none;

    outline: none;

    background:#f2f2f2;

    border-radius: 30px;

    color:black;

    font-size: 16px;

    padding-left: 5px;

    padding-right: 40px;

    text-align: center;

     

}

 

.search-box button{

    cursor: pointer;

    width:40px;

    height: 40px;

    border-radius: 30px;

    border:none;

    position: absolute;

    top:0;

    right: 0;

    transform: scale(0.9);

    background: green;

    color: #fff;

}

header ul {

    flex:2;

    display: flex;

    justify-content: space-evenly;

}

header ul li{

    list-style: none;

}

header ul li a{

    text-decoration: none;

    color:#fff;

    font-weight: 600;

    text-transform: uppercase;

    padding: 10px 15px;

}

header ul li a:hover{

    border-bottom: 2px solid cadetblue;

}

header .menu{

    font-size: 2.5em;

    display: none;

}

@media(max-width:1000px){

    .search-box button{

        position: absolute;

    }

    header ul{

        position: fixed;

        top:100px;

        right: -100%;

        background: rgba(0,0,0,0.5);

        height: calc(100vh - 100px);

        width:50%;

        flex-direction: column;

        align-items: center;

        transition: right 0.5s linear;

    }

     

    header .menu{

        display: block;

        width:100px;

        text-align: center;

    }

    #chk1:checked ~ ul{

        right: 0;

       

    }

 

}</style>

</head>

<body>

    <header>

        <input type ="checkbox" name ="" id ="chk1">

        <div class="logo"><h1>ARDHAN CODE</h1></div>

            <div class="search-box">

                <form>

                    <input type ="text" name ="search" id ="srch" placeholder="Search">

                    <button type ="submit"><i class="fa fa-search"></i></button>

                </form>

            </div>

            <ul>

                <li><a href="#">Home</a></li>

                <li><a href="#">Product</a></li>

                <li><a href="#">Blog</a></li>

                <li><a href="#">Contact</a></li>

                <li>

                    <a href="#"><i class="fa fa-facebook"></i></a>

                    <a href="#"><i class="fa fa-twitter"></i></a>

                    <a href="#"><i class="fa fa-instagram"></i></a>

                     

                </li>

            </ul>

            <div class="menu">

                <label for="chk1">

                    <i class="fa fa-bars"></i>

                   

                </label>

            </div>

    </header>

   

</body>

</html>!

 Hasil :

Bootstrap and Container

CONTAINER AND BOOTSTRAP

#APA ITU CONTAINER?

      Container adalah fondasi dasar dari blok layout. Container berfungsi untuk membungkus blok di dalamnya, sehingga terlihat rapi terhadap ukuran layar. Container juga memiliki breakpoint. Ukuran kontainer akan 100% pada breakpoint tertentu. 

#APA ITU BOOTSTRAP?

     Bootstrap adalah salah satu framework CSS yang berfokus pada pengembangan front-end website. Di dalamnya mengandung HTML, CSS, dan JavaScript untuk membuat tampilan website yang modern, responsif, dan mobile-friendly

#CONTOH HASIL BOOTSTRAP AND CONTAINER :