Cara membuat web translate dengan API Key Eksternal GRATISAN


API Key  adalah pengidentifikasi yang digunakan untuk menganutetikasi pengguna, pengembang, atau program pangila ke API. tetapi, mereka biasanya digunakan untuk mengotententikasi proyek dengan API daripada pengguna manusia. platform yang berbeda dapat menerapkan dan menggunakan kunci API dengan cara yang berbeda.

Penggunaanya

API Key biasanya bertindak sebagai pengidentifikasi unik dan token rahasia untuk otentikasi, dan umumnya akan memiliki seperangkat hak akses pasa API yang terkait dengannya.

API HTTP

API Key untuk API berbasis HTTP dapat dikirim dengan berbagai cara:
Dalamstring kueri :
POST / sesuatu? Api_key = abcdef12345 HTTP / 1.1
Sebagai tajuk permintaan:
DAPATKAN / sesuatu HTTP / 1.1
 X-API-Key : abcdef12345
Sebagai COOKIE :
DAPATKAN / sesuatu HTTP / 1.1
 Cookie : X-API-KEY = abcdef12345

Kunci API Key pada umumnya tidak dianggapaman; biasanya dapat diakses oleh klie, sehingga memudahkan seseorang untuk mencuri kunci API. Selah dicuri, Seseorang itu tidak memiliki kadaluarsa, senhingga dapat digunakan tanpa batas waktu, kecuali jika pemilik proyek tersebut mencabut atau membuat ulang kunci tersebut. Apabila API Key dimaksudkan agar dapat diakss oleh klien, itu hanya dianggap aman jika diguankan bersama dengan mekanisme keamanan lainnya seperti HTTPS / SSL. 

Nah itu dia sedikit penjelasan tetang API KEY Eksternal teman-teman.Brikut di bawah ini saya akan bagikan source code yang sudah jadi, tentang membuat web translate dengan API Key Eksternal GRATISAN dari Yandex.

HTML & PHP
<?php
$text = isset($_POST['translate_from']) ? htmlentities(ucfirst(trim($_POST['translate_from']))) : '';
$from = isset($_POST['langpairFROM']) ? htmlentities($_POST['langpairFROM']) : '';
$to = isset($_POST['langpairTO']) ? htmlentities($_POST['langpairTO']) : '';


if (empty($text) && empty($from) && empty($to)) {
    $translation = '';
} else {
    $translation = translate($text, $from, $to);
}

function translate($text, $from, $to)
{
    $api = 'API KEY MILIK KAMU SENDIRI';
    $url = file_get_contents('https://translate.yandex.net/api/v1.5/tr.json/translate?key=' . $api . '&lang=' . $from . '-' . $to . '&text=' . urlencode($text));
    $json = json_decode($url);
    return $json->text[0];
}
?>
<!-- 
    Nama : Juan Karly Matheus
    TOPIK: API YANDEX TRANSLATE
 -->
<!DOCTYPE html>
<html>
<head>
    <link rel="shortcut icon" href="img/favicon.png">
    <meta charset="utf-8">
    <meta name="description" content="Layanan gratis menerjemahkan kata, frasa, dan halaman web secara instan antara bahasa Inggris dan lebih dari 100 bahasa lainnya">
    <meta name="keywords" content="translate">
    <meta name="author" content="Juan Karly Matheus">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <title>Tranlsate | Juan Karly Matheus</title>
    <link href="https://fonts.googleapis.com/css2?family=Baloo+Thambi+2:wght@500&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <!------ Include the above in your HEAD tag ---------->

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <!------ Include the above in your HEAD tag ---------->
    <link href="https://fonts.googleapis.com/css?family=Oleo+Script:400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Teko:400,700" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

</head>

<body>

    <div id="particles-js">
        <div class="animation-area">
            <ul class="box-area">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <div class="section-content">
                    <h1 class="section-header">Translate</span></h1>
                    <i><b>Ketik</b> dan Klik <b>Translate</b></i>
                </div>
                <form method="POST" action="">
                    <div class="col-md-6">
                        <div class="form-group">
                            <select id="selec" class="my-select form-control" name="langpairFROM">
                                <option value="id">Indonesia</option>
                                <option value="en">English</option>
                                <option value="ja">Jepang</option>
                                <option value="ko">Korea</option>
                                <option value="zh">China</option>
                                <option value="nl">Belanda</option>
                                <option value="pt">Portugis</option>
                                <option value="es">Spanyol</option>
                                <option value="th">Thai</option>
                                <option value="jv">Jawa</option>
                                <option value="de">Jerman</option>
                                <option value="ma">Malaysia</option>
                                <option value="fr">Perancis</option>

                            </select> </div>
                            <div class="form-group">

                                <textarea rows="6" name="translate_from" class="form-control" id="original" placeholder="Masukan teks" required><?= $text; ?></textarea>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <select  id="selec" class="form-control" name="langpairTO">
                                    <option value="en">English</option>
                                    <option value="id">Indonesia</option>
                                    <option value="ja">Jepang</option>
                                    <option value="ko">Korea</option>
                                    <option value="zh">China</option>
                                    <option value="nl">Belanda</option>
                                    <option value="pt">Portugis</option>
                                    <option value="es">Spanyol</option>
                                    <option value="th">Thai</option>
                                    <option value="jv">Jawa</option>
                                    <option value="de">Jerman</option>
                                    <option value="ma">Malaysia</option>
                                    <option value="fr">Perancis</option>
                                </select>

                            </div>
                            <div class="form-group">
                                <textarea rows="6" class="form-control" id="translate_to" placeholder="Terjamahan"><?= $translation; ?></textarea>
                            </div>
                            <button type="submit" id="btnsub" class="btn btn-info"><i class="fa fa-globe"></i> Translate</button>
                        </div>
                    </form>
                    <div class="mediasocial">
                        <a class="btnms" href="https://www.facebook.com/juan.matheus.545849" target="_blank" title="Facebook | Juan Karly Matheus"><i class="fa fa-facebook-f" aria-hidden="true"></i></a>
                        <a class="btnms" href="https://www.instagram.com/__juanmatheus/" target="_blank" title="instagram | Juan Karly Matheus"><i class="fa fa-instagram" aria-hidden="true"></i></a>
                        <a class="btnms" href="https://twitter.com/juanmatheus37" target="_blank" title="Twitter | Juan Karly Matheus"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                        <a class="btnms" onclick="myFunction()"  title="Mode Gelap"><i class="fa fa-adjust"></i></a>
                    </div>
                </ul>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js" charset="utf-8"></script>
        <script type="text/javascript">
            particlesJS.load('particles-js','json/particles.json', function() {
                console.log('json/particles.json loaded...');
            })
        </script>
        <script>
            function myFunction() {
                var element = document.body;
                element.classList.toggle("dark-mode");
            }
        </script>
    </body>

    </html>

CSS

*{
  font-family: 'Baloo Thambi 2', cursive; 
  padding-left: 0px;
}

.dark-mode {
  background: #15202B;
}

body{
  background: linear-gradient(to left, #EE7BAF, #F0AD7E);
  width: 100%;
  height: 100vh;
  
}


.section-header{
  padding-top: 50px;
  font-family: 'Oleo Script', cursive;
  color: white;
  font-size: 45px;
  color: #fff;
  text-align: center;
}

.section-content{
  color: #fff;
  text-align: center;
  padding-bottom: 30px;
}

textarea.form-control {
  height: 100%;
  width: 100%;
  size: 100%;
  resize: none;
  border-radius: 20px;
  box-shadow: 5px 0px 15px #c3c3c3;
}

#selec{
  border-radius: 30px;
  box-shadow: 5px 0px 15px #c3c3c3;
}
#btnsub{
  border-radius: 30px;
  float: right;
  size: 100%;
  background: #fff;
  color: #000;
  margin-top: 10px;
}
.animation-area{
  position: absolute;
  width: 100%;
  height: 100%;
}

.box-area{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.box-area li{
  position: absolute;
  display: block;
  list-style: none;
  width: 25px;
  height: 25px;
  background: rgba(255, 255, 255,0.2);
  animation: animate 20s linear infinite;
  bottom: -100px;
}

.box-area li:nth-child(1){
  left: 86%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
}
.box-area li:nth-child(2){
  left: 12%;
  width: 30px;
  height: 30px;
  animation-delay: 1.5s;
  animation-duration: 10s;
}
.box-area li:nth-child(3){
  left: 70%;
  width: 100px;
  height: 100px;
  animation-delay: 5.5s;
}
.box-area li:nth-child(4){
  left: 42%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 15s; 
}
.box-area li:nth-child(5){
  left: 65 %;
  width: 40px;
  height: 40px;
  animation-delay: 0s;
}
.box-area li:nth-child(6){
  left: 15%;
  width: 110px;
  height: 110px;
  animation-delay: 3.5s;
}

@keyframes animate{
  0%{
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100%{
    transform: translateY(-800px) rotate(360deg);
    opacity: 1;
  }
}

.mediasocial{
  position: absolute;
  top: 50%;
  transform: translateY(150%);
  width: 100%;
  text-align: center;
}

.btnms{
  display: inline-block;
  width: 90px;
  height: 90px;
  background: #fff;
  margin: 10px;
  border-radius: 30px;
  box-shadow: 0 5px 15px -5px #00000070;
  color: #3498db;
  overflow: hidden;
  position: relative;
}

.btnms i{
  line-height: 90px;
  font-size: 26px;
  transition: 0.2s linear;
}

.btnms:hover i{
  transform: scale(1.3);

}

.btnms::before{
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  background: #F3B5A0;
  transform: rotate(45deg);
  left: -110%;
  top: 90%;
}

.btnms:hover::before{
  animation: aaa 0.7s 1;
  top: -10%;
  left: -105;
}

@keyframes aaa{
  0%{
    top: -110%;
    left: 90%;

    }50%{
      top: 10%;
      left: -30%;

      }100%{
        top: -10%;
        left: -10%;
      }
    }

    @keyframes body{
      0%{
        top: -110%;
        left: 90%;

        }50%{
          top: 10%;
          left: -30%;

          }100%{
            top: -10%;
            left: -10%;
          }
        }

        @media (min-width:100px) and (max-width: 600px) {
         #particles-js{
          height: 1vh;
        }

        textarea.form-control {
          height: 100%;
          width: 100%;
          resize: none;


        }

        body{
          background: linear-gradient(to left, #EE7BAF, #F0AD7E);
          height: 100%;
          background-size: 100%;
          width: 100%;
        }

        .mediasocial{
          position: absolute;
          top: 50%;
          transform: translate(1%,450%);
          font-size: 5px;
          text-align: center;
        }

        .mediasocial{
          position: absolute;
          top: 50%;
          width: 50%;
          text-align: center;
        }

        .btnms{
          display: inline-block;
          width: 35px;
          height: 35px;
          background: #f1f1f1;
          margin: 10px;
          border-radius: 30px;
          box-shadow: 0 5px 15px -5px #00000070;
          color: #3498db;
          overflow: hidden;
          position: relative;
          float: left;
        }

        .btnms i{
          line-height: 35px;
          font-size: 23px;
          transition: 0.2s linear;
        }

        .btnms:hover i{
          transform: scale(1.3);

        }

        .btnms::before{
          content: "";
          position: absolute;
          width: 120%;
          height: 120%;
          background: #2980B9;
          transform: rotate(45deg);
          left: -110%;
          top: 90%;
        }

        .btnms:hover::before{
          animation: aaa 0.7s 1;
          top: -10%;
          left: -105;
        }

        @keyframes aaa{
          0%{
            top: -110%;
            left: 90%;

            }50%{
              top: 10%;
              left: -30%;

              }100%{
                top: -10%;
                left: -10%;
              }
            }



            .box-area li{
              position: absolute;
              display: block;
              list-style: none;
              width: 25px;
              height: 25px;
              background: rgba(255, 255, 255,0.2);
              animation: animate 20s linear infinite;
              bottom: -100px;
            }

            .box-area li:nth-child(1){
              left: 86%;
              width: 40px;
              height: 40px;
              animation-delay: 0s;
            }
            .box-area li:nth-child(2){
              left: 6%;
              width: 15px;
              height: 15px;
              animation-delay: 1.5s;
              animation-duration: 10s;
            }
            .box-area li:nth-child(3){
              left: 35%;
              width: 50px;
              height: 50px;
              animation-delay: 5.5s;
            }
            .box-area li:nth-child(4){
              left: 21%;
              width: 75px;
              height: 75px;
              animation-delay: 0s;
              animation-duration: 15s; 
            }
            .box-area li:nth-child(5){
              left: 33 %;
              width:20px;
              height: 20px;
              animation-delay: 0s;
            }
            .box-area li:nth-child(6){
              left: 7%;
              width: 55px;
              height: 55px;
              animation-delay: 3.5s;
            }

            @keyframes animate{
              0%{
                transform: translateY(0) rotate(0deg);
                opacity: 1;
              }
              100%{
                transform: translateY(-800px) rotate(360deg);
                opacity: 1;
              }
            }

          }



Nah itu dia teman-teman Source Codenya, jika teman-teman ingin mendapatkan kode yang lengkap berserta desainnya silahkan teman-teman Komen di bawah atau bisa langsung hubungi saya melalui kontak yang telah saya sediakan pada About US.

0 Comments

Post a Comment

Terimakasih telah mengunjungi situs ini. Silahkan berkomentar dengan bijak.Komentar spam atau berisikan link aktif tidak akan di tampilkan. Terimakasih