Objectifs
- Apprendre à créer un système d'inscription
Exercice 01
Énoncé
- Vous pouvez visualiser l'énoncé de l'application
Solution
tp02-1 Ex01.html
<!doctype html> <html lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Filtre de base First</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Orbitron"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script type="text/javascript" src="tp02-1 Ex01.js"></script> <link rel="stylesheet" type="text/css" href="tp02-1 Ex01.css"> </head> <body> <div class="container "> <div class="row"> <div class="col-md-8"> <div class="idDiv"> <center> <h3>Trouver l'adresse ip correspondant à un nom de domaine</h3></center> <p>Saisir un nom de domaine pour trouver l'adresse IP qui lui correspondant.</p> <form action=""> <div class="form-group" style="width: 60%;margin: 0 auto;padding-bottom: 10px;"> <label for="usr">Saisir un nom de domaine:</label> <input type="text" class="form-control" id="searchip"> </div> <div id="resultip"> </div></br> <button id="searchipbutton" type="button" class="btn btn-primary w-100">Cliquer pour obtenir l'adresse ip</button> </form> </div> </div> </div> </div> <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>--> </body></html>tp02-1 Ex01.css
#resultip{ background-color: #eee; border: 2px solid blue; border-radius: 10px; width: 60%; margin: 0 auto; font-size: 38px; font-weight: bold; font-family: 'Orbitron',sans-serif; text-align: center; } .idDiv{border: 2px solid blue; border-radius: 6px;margin: 10px;font: 1.2em arial, helvetica, sans-serif; padding: 20px;} #searchip{ font-size: 18px; }
tp02-1 Ex01.js
$(function(){ $('#searchipbutton').click(function(){ $.ajax({ type: "post", url: "tp02-1 Ex01.php", data: 'ip=' + $('#searchip').val() }).done(function(msg){ if (msg != $('#searchip').val()) $('#resultip').html(msg); else $('#resultip').html("domaine non valide"); }); // fin de .done() }); // fin du gestionnaire d'événement });tp02-1 Ex01.php
<?php if ($_POST['ip']): $ip = gethostbyname($_POST['ip']); echo($ip); endif; ?>