Créer Une interface De Recherche Dynamique Avec VueJS Et Php/mySql

Comment créer une interface de recherche dynamique avec VueJS et Php/mySql étape par étape

░ Fichier de base → https://github.com/JustFS/vuejs-php/archive/starting_file.zip

#vue #vuejs #mysql #php

Créer Une interface De Recherche Dynamique Avec VueJS Et Php/mySql

Comment créer une interface de recherche dynamique avec VueJS et Php/mySql étape par étape

░ Fichier de base → https://github.com/JustFS/vuejs-php/archive/starting_file.zip

#vue #vuejs #mysql #php

Joe Hoppe

1595905879

Best MySQL DigitalOcean Performance – ScaleGrid vs. DigitalOcean Managed Databases

HTML to Markdown

MySQL is the all-time number one open source database in the world, and a staple in RDBMS space. DigitalOcean is quickly building its reputation as the developers cloud by providing an affordable, flexible and easy to use cloud platform for developers to work with. MySQL on DigitalOcean is a natural fit, but what’s the best way to deploy your cloud database? In this post, we are going to compare the top two providers, DigitalOcean Managed Databases for MySQL vs. ScaleGrid MySQL hosting on DigitalOcean.

At a glance – TLDR
ScaleGrid Blog - At a glance overview - 1st pointCompare Throughput
ScaleGrid averages almost 40% higher throughput over DigitalOcean for MySQL, with up to 46% higher throughput in write-intensive workloads. Read now

ScaleGrid Blog - At a glance overview - 2nd pointCompare Latency
On average, ScaleGrid achieves almost 30% lower latency over DigitalOcean for the same deployment configurations. Read now

ScaleGrid Blog - At a glance overview - 3rd pointCompare Pricing
ScaleGrid provides 30% more storage on average vs. DigitalOcean for MySQL at the same affordable price. Read now

MySQL DigitalOcean Performance Benchmark
In this benchmark, we compare equivalent plan sizes between ScaleGrid MySQL on DigitalOcean and DigitalOcean Managed Databases for MySQL. We are going to use a common, popular plan size using the below configurations for this performance benchmark:

Comparison Overview
ScaleGridDigitalOceanInstance TypeMedium: 4 vCPUsMedium: 4 vCPUsMySQL Version8.0.208.0.20RAM8GB8GBSSD140GB115GBDeployment TypeStandaloneStandaloneRegionSF03SF03SupportIncludedBusiness-level support included with account sizes over $500/monthMonthly Price$120$120

As you can see above, ScaleGrid and DigitalOcean offer the same plan configurations across this plan size, apart from SSD where ScaleGrid provides over 20% more storage for the same price.

To ensure the most accurate results in our performance tests, we run the benchmark four times for each comparison to find the average performance across throughput and latency over read-intensive workloads, balanced workloads, and write-intensive workloads.

Throughput
In this benchmark, we measure MySQL throughput in terms of queries per second (QPS) to measure our query efficiency. To quickly summarize the results, we display read-intensive, write-intensive and balanced workload averages below for 150 threads for ScaleGrid vs. DigitalOcean MySQL:

ScaleGrid MySQL vs DigitalOcean Managed Databases - Throughput Performance Graph

For the common 150 thread comparison, ScaleGrid averages almost 40% higher throughput over DigitalOcean for MySQL, with up to 46% higher throughput in write-intensive workloads.

#cloud #database #developer #digital ocean #mysql #performance #scalegrid #95th percentile latency #balanced workloads #developers cloud #digitalocean droplet #digitalocean managed databases #digitalocean performance #digitalocean pricing #higher throughput #latency benchmark #lower latency #mysql benchmark setup #mysql client threads #mysql configuration #mysql digitalocean #mysql latency #mysql on digitalocean #mysql throughput #performance benchmark #queries per second #read-intensive #scalegrid mysql #scalegrid vs. digitalocean #throughput benchmark #write-intensive

I am Developer

1597487472

Country State City Dropdown list in PHP MySQL PHP

Here, i will show you how to populate country state city in dropdown list in php mysql using ajax.

Country State City Dropdown List in PHP using Ajax

You can use the below given steps to retrieve and display country, state and city in dropdown list in PHP MySQL database using jQuery ajax onchange:

Step 1: Create Country State City Table
Step 2: Insert Data Into Country State City Table
Step 3: Create DB Connection PHP File
Step 4: Create Html Form For Display Country, State and City Dropdown
Step 5: Get States by Selected Country from MySQL Database in Dropdown List using PHP script
Step 6: Get Cities by Selected State from MySQL Database in DropDown List using PHP script

https://www.tutsmake.com/country-state-city-database-in-mysql-php-ajax/

#country state city drop down list in php mysql #country state city database in mysql php #country state city drop down list using ajax in php #country state city drop down list using ajax in php demo #country state city drop down list using ajax php example #country state city drop down list in php mysql ajax

Jarrod Douglas

1658866920

Ajouter Une Zone De Texte De Saisie Semi-Automatique Avec Vue.js PHP

En ajoutant la saisie semi-automatique à une zone de texte, il est plus facile de rechercher un élément. Il affiche une liste de suggestions basée sur l'entrée dans la zone de texte.

J'utilise le package Axios pour charger des suggestions.

Dans ce tutoriel, je montre comment vous pouvez ajouter une zone de texte de saisie semi-automatique à l'aide d'un composant personnalisé dans Vue.js. J'utilise PHP pour récupérer des données de la base de données MySQL et renvoyer une réponse pour des suggestions.

1. Structure du tableau

Créer usersune table et ajouter des enregistrements.

CREATE TABLE `users` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `username` varchar(80) NOT NULL,
  `fullname` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

2. Configuration

Créez un config.phppour la connexion à la base de données.

Code terminé

<?php

$host = "localhost"; /* Host name */$user = "root"; /* User */$password = ""; /* Password */$dbname = "tutorial"; /* Database name */
$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}

3.HTML

Vous pouvez télécharger le package Axios à partir d' ici ou vous pouvez utiliser CDN.

<script src='https://unpkg.com/axios/dist/axios.min.js'></script>

Créer <div id='myapp' >un conteneur.

Créez deux vueauto-completecomposants. Modèle défini pour lire la valeur de l'élément sélectionné dans la liste de suggestions et @inputévénement pour effectuer une action après la sélection de l'élément.

Affichez la valeur du modèle dans <p>.

Code terminé

<!DOCTYPE html>
<html>
<head>
   <title>Autocomplete textbox with Vue.js PHP and MySQL</title>

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
   <!-- CSS -->
   <link rel="stylesheet" type="text/css" href="style.css">

   <!-- Script -->
   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
   <script src='https://unpkg.com/axios/dist/axios.min.js'></script>

</head>
<body>
   <div id='myapp' >

      <!-- Auto complete element 1 -->
      <vueauto-complete v-model="userid1" @input="handleInput1()"></vueauto-complete>

      <!-- Selected item -->
      <p><b>Selected UserID - {{ userid1 }}</b> </p>

      <br>
      <!-- Auto complete element 2 -->
      <vueauto-complete v-model="userid2" @input="handleInput2()"></vueauto-complete>

      <!-- Selected item -->
      <p><b>Selected UserID - {{ userid2 }}</b> </p>

   </div>

</body>

</html>

4. CSS

Créer style.cssun fichier.

Code terminé

.autocompleteel,.autocompleteel .suggestionlist{
   width: 300px;
}

.autocompleteel input[type=text]{
   width: 100%;
   padding: 5px;
}

.suggestionlist{
   position: absolute;
}

.suggestionlist ul{
   width: 100%;
   background: whitesmoke;
   list-style: none;
   margin: 0;
   padding: 5px;
}

.suggestionlist ul li{
   background: white;
   padding: 4px;
   margin-bottom: 1px;
}

.suggestionlist li:not(:last-child){
   border-bottom: 1px solid #cecece;
}

.suggestionlist ul li:hover{
   cursor: pointer;
   background: whitesmoke;
}

5.PHP

Créer ajaxfile.phpun fichier pour gérer les requêtes AJAX et renvoyer la réponse.

Affecter $_GET['search']à la $searchvariable.

Si $searchn'est pas vide, récupérez 5 enregistrements de la userstable où $searchil existe sur le fullnameterrain.

Bouclez sur les enregistrements récupérés et initialisez $data_arrArray avec les touches idet .name

Passe $row['id']à idclé et $row['name']à nameclé.

Renvoie $data_arrun tableau au format JSON.

Code terminé

<?php
include "config.php";

if(isset($_GET['search'])){
   $search = mysqli_real_escape_string($con,trim($_GET['search']));

   $data = array();
   if(!empty($search)){

      // Fetch 5 records
      $result = mysqli_query($con,"select * from users where fullname like '%".$search."%' limit 5");

      while ($row = mysqli_fetch_array($result)) {
         $data[] = array(
            "id" => $row['id'],
            "name"=>$row['fullname']
         );
      }
   }

   echo json_encode($data);
   exit;
}

6. Scénario

Créer un composant –

Créez un vueauto-completecomposant pour ajouter une zone de texte de saisie semi-automatique.

data() – Définissez searchTextet suggestiondata. Utilisez searchTextpour v-modelet suggestiondatapour stocker la liste de suggestions.

modèle - Avec l' templateoption, définissez le modèle de composant.

Créez un élément de zone de texte. Définissez v-model='searchText'et définissez @keyup='loadSuggestions'un événement pour charger les données de suggestion.
Afficher <div class='suggestionlist' >si suggestiondatan'est pas vide.

Utiliser <ul >pour afficher la liste des éléments en boucle sur le suggestiondata. Définir @click='itemSelected(index)'sur le <li>.

méthodes – Définir deux méthodes –

loadSuggestions() - Cette méthode est appelée lorsque keyupl'événement se déclenche sur la zone de texte.

Videz le suggestiondataet envoyez la requête AJAX à 'ajaxfile.php'si searchTextn'est pas vide. Passer search: this.searchTextcomme données.
En cas de rappel réussi, attribuez response.dataà el.suggestiondata.

itemSelected() – Cette méthode est appelée lorsqu'un élément est sélectionné dans la liste de suggestions.

Lire l'identifiant et le nom. Attribuez nameet this.searchTextvidez le fichier this.suggestiondata.

Émettre un événement au composant parent une fois que la valeur de l'entrée change.

this.$emit("input", id);

Je suis passé idcomme deuxième paramètre. Vous pouvez le modifier en fonction de vos besoins.

Initialize Vue –

Initialisez Vue sur #myapp.

Créez deux variables de données userid1et userid2. Les deux variables sont utilisées comme variable de modèle dans le composant.

Définissez deux méthodes – handleInput1et handleInput2.

Méthode appelée lorsqu'un élément est sélectionné dans la liste de suggestions. Ici, j'imprime simplement la valeur sélectionnée dans la console. Vous pouvez utiliser cette méthode pour effectuer certaines actions.

Code terminé

Vue.component('vueauto-complete', {
   data: function () {
      return {
         searchText:'',
         suggestiondata:[]
      }
   },
   template: `<div class='autocompleteel' > 
     <div >
        <input type='text' @keyup='loadSuggestions' placeholder='Enter some text' 
v-model='searchText' 
> <br> 
        <div class='suggestionlist' v-if="suggestiondata.length" >
          <ul > 
            <li v-for= '(item,index) in suggestiondata' @click='itemSelected(index)' > 
{{ item.name }} 
            </li> 
          </ul>
        </div> 
     </div>
     </div>`, 
   methods: {
      loadSuggestions: function(e){
         var el = this;
         this.suggestiondata = [];

         if(this.searchText != ''){

            axios.get('ajaxfile.php', {
               params: {
                  search: this.searchText
               }
            })
            .then(function (response) {
                el.suggestiondata = response.data;
            });

         } 

      },
      itemSelected: function(index){
         var id = this.suggestiondata[index].id; 
         var name = this.suggestiondata[index].name;

         this.searchText = name;
         this.suggestiondata = [];

         this.$emit("input", id);

      }

   },
})

var app = new Vue({
   el: '#myapp',
   data: {
      userid1: 0,
      userid2: 0
   },
   methods: {
      handleInput1: function(){
         console.log("value : " + this.userid1);
      },
      handleInput2: function(){
         console.log("value : " + this.userid2);
      }
   }
})

7. Démo

Voir la démo

8.Conclusion

Vous pouvez utiliser ce composant plusieurs fois sur la même page. Avec votre modèle défini, lisez la valeur de l'élément sélectionné.

Dans l'exemple, j'ai attribué l'ID utilisateur au modèle après la sélection de l'élément. Vous pouvez le modifier selon vos besoins et avec l'événement d'entrée, vous pouvez effectuer une action.

Source : https://makitweb.com

#php #vuejs #mysql

Shayna Lowe

1659737940

Comment Créer Une Page D'inscription Avec MySQL Et PHP

Dans le site Web basé sur l'adhésion, la page d'inscription et de connexion est courante.

L'utilisateur doit créer un nouveau compte et se connecter au site Web pour accéder aux services et gérer son compte.

Dans ce tutoriel, je montre comment vous pouvez créer une page d'inscription avec MySQL et PHP.

1. Structure du tableau

J'utilise userstable dans l'exemple.

CREATE TABLE `users` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `fname` varchar(80) NOT NULL,
  `lname` varchar(80) NOT NULL,
  `email` varchar(80) NOT NULL,
  `password` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

2. Configuration

Créez un nouveau config.phpfichier pour la configuration de la base de données.

Code terminé

<?php
session_start();
$host = "localhost"; /* Host name */$user = "root"; /* User */$password = ""; /* Password */$dbname = "tutorial"; /* Database name */
$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
 die("Connection failed: " . mysqli_connect_error());
}

3.HTML & PHP

Créez un <form method='post' action='' >.

Si $error_messagen'est pas vide, affichez $error_messagela valeur à l'écran. De même, si $success_messagen'est pas vide, affichez la $success_messagevaleur à l'écran.

REMARQUE – La valeur est affectée à $error_messageet $success_messagevariable lors de la <form >soumission en fonction des conditions.

Ajoutez des champs de saisie pour la saisie - prénom, nom, e-mail, mot de passe et confirmation du mot de passe.

Ajoutez également un bouton de soumission.

Code terminé

<?php 
include "config.php";
?>
<!DOCTYPE html>
<html>
  <head>
    <title>Create Registration form with MySQL and PHP</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

  </head>
  <body>
    <div class='container'>
      <div class='row'>

        <div class='col-md-6' >

          <form method='post' action=''>

            <h1>SignUp</h1>
            <?php 
            // Display Error message
            if(!empty($error_message)){
            ?>
            <div class="alert alert-danger">
              <strong>Error!</strong> <?= $error_message ?>
            </div>

            <?php
            }
            ?>

            <?php 
            // Display Success message
            if(!empty($success_message)){
            ?>
            <div class="alert alert-success">
              <strong>Success!</strong> <?= $success_message ?>
            </div>

            <?php
            }
            ?>

            <div class="form-group">
              <label for="fname">First Name:</label>
              <input type="text" class="form-control" name="fname" id="fname" required="required" maxlength="80">
            </div>
            <div class="form-group">
              <label for="lname">Last Name:</label>
              <input type="text" class="form-control" name="lname" id="lname" required="required" maxlength="80">
            </div>
            <div class="form-group">
              <label for="email">Email address:</label>
              <input type="email" class="form-control" name="email" id="email" required="required" maxlength="80">
            </div>
            <div class="form-group">
              <label for="password">Password:</label>
              <input type="password" class="form-control" name="password" id="password" required="required" maxlength="80">
            </div>
            <div class="form-group">
              <label for="pwd">Confirm Password:</label>
              <input type="password" class="form-control" name="confirmpassword" id="confirmpassword" onkeyup='' required="required" maxlength="80">
            </div>

            <button type="submit" name="btnsignup" class="btn btn-default">Submit</button>
          </form>
        </div>

     </div>
    </div>
  </body>
</html>

4. Soumettre le formulaire

Ajoutez le code suivant dans la <head>section.

Lors de la <form >soumission, attribuez des $_POSTvaleurs dans les variables.

Validez les valeurs –

Pour vérifier que les valeurs d'entrée sont valides ou non, créez une $isValid = truevariable. Si une validation est falsealors attribuée falseà $isValidet l'enregistrement n'est pas inséré.

Tout d'abord, vérifiez si toutes les valeurs sont saisies ou non. S'il n'est pas saisi, attribuez - falsele à $isValidet "Please fill all fields."à $error_message.
Vérifiez si le mot de passe saisi et confirmez le mot de passe sont égaux ou non. S'il n'est pas égal, attribuez falseà $isValidet "Confirm password not matching."à $error_message.
Vérifiez si $emailla valeur de la variable a un e-mail valide ou non. S'il n'est pas valide, attribuez - falsele à $isValidet "Invalid Email-ID."à $error_message.
Vérifiez si email-id existe déjà dans la userstable ou non. Si disponible, attribuez falseà $isValidet "Email-ID is already existed."à $error_message.

Si $isValida trueune valeur, insérez un nouvel enregistrement dans la userstable et attribuez- "Account created successfully."le à $success_message.

Code terminé

<?php 
$error_message = "";$success_message = "";

// Register user
if(isset($_POST['btnsignup'])){
   $fname = trim($_POST['fname']);
   $lname = trim($_POST['lname']);
   $email = trim($_POST['email']);
   $password = trim($_POST['password']);
   $confirmpassword = trim($_POST['confirmpassword']);

   $isValid = true;

   // Check fields are empty or not
   if($fname == '' || $lname == '' || $email == '' || $password == '' || $confirmpassword == ''){
     $isValid = false;
     $error_message = "Please fill all fields.";
   }

   // Check if confirm password matching or not
   if($isValid && ($password != $confirmpassword) ){
     $isValid = false;
     $error_message = "Confirm password not matching";
   }

   // Check if Email-ID is valid or not
   if ($isValid && !filter_var($email, FILTER_VALIDATE_EMAIL)) {
     $isValid = false;
     $error_message = "Invalid Email-ID.";
   }

   if($isValid){

     // Check if Email-ID already exists
     $stmt = $con->prepare("SELECT * FROM users WHERE email = ?");
     $stmt->bind_param("s", $email);
     $stmt->execute();
     $result = $stmt->get_result();
     $stmt->close();
     if($result->num_rows > 0){
       $isValid = false;
       $error_message = "Email-ID is already existed.";
     }

   }

   // Insert records
   if($isValid){
     $insertSQL = "INSERT INTO users(fname,lname,email,password ) values(?,?,?,?)";
     $stmt = $con->prepare($insertSQL);
     $stmt->bind_param("ssss",$fname,$lname,$email,$password);
     $stmt->execute();
     $stmt->close();

     $success_message = "Account created successfully.";
   }
}
?>

5. Démo

Voir la démo

6. Conclusion

Dans ce tutoriel, j'ai couvert le système d'enregistrement avec MySQL et PHP.

Source : https://makitweb.com

#php #mysql

Créer Une interface De Recherche Dynamique Avec VueJS Et Php/mySql

What is GEEK

Buddha Community

Créer Une interface De Recherche Dynamique Avec VueJS Et Php/mySql

Best MySQL DigitalOcean Performance – ScaleGrid vs. DigitalOcean Managed Databases

Country State City Dropdown list in PHP MySQL PHP

Country State City Dropdown List in PHP using Ajax

Ajouter Une Zone De Texte De Saisie Semi-Automatique Avec Vue.js PHP

1. Structure du tableau

2. Configuration

3.HTML

4. CSS

5.PHP

6. Scénario

7. Démo

8.Conclusion

Comment Créer Une Page D'inscription Avec MySQL Et PHP

1. Structure du tableau

2. Configuration

3.HTML & PHP

4. Soumettre le formulaire

5. Démo

6. Conclusion