Share
In deze tutorial gaan we van start tot finish een jQuery-plug-in maken; Met deze plug-in kunnen wij (of andere ontwikkelaars) eenvoudig een eenvoudige peilingwidget toevoegen aan een webpagina of blog. Onder poll-widget bedoel ik een gebied waarin een vraag wordt gesteld die door bezoekers wordt aangemoedigd om te antwoorden. Nadat ze de vraag hebben beantwoord, worden de resultaten van de peiling weergegeven.
De bovenstaande video en onderstaande screenshot laten zien waar we naartoe werken:
De plug-in gebruikt jQuery-goedheid om de DOM-structuur van de widget te genereren, en om het antwoord op de vraag vast te leggen en door te geven aan de server voor opslag. We zullen een beetje standaard PHP gebruiken om de nieuwste stem toe te voegen aan een MySQL-database en vervolgens de nieuwe resultaten terug te echoën in een JSON-object. jQuery wordt vervolgens gebruikt om de reactie te verwerken en de resultaten weer te geven (zoals hierboven weergegeven) in de widget.
Hoewel het installeren en configureren van een webserver, PHP en MySQL buiten het bestek van deze tutorial valt, zullen we alle benodigde stappen bekijken, inclusief het instellen van de database. Al met al werken we in de loop van deze les met CSS, HTML, jQuery, PHP, MySQL en JSON.
We moeten eerst ons ontwikkelingsgebied opzetten. Om dit voorbeeld op een desktopcomputer (voor ontwikkeling, testen, enz.) Uit te voeren, moeten we de voorbeeldbestanden uitvoeren vanuit een map die onze webserver inhoud kan aanbieden. Ik gebruik Apache en laat een map instellen op mijn C-schijf genaamd Apache-site. Dit is de inhoudservicemap voor mijn localhost. In deze map (of de equivalente map op uw systeem) moeten we een nieuwe map maken met de naam poll. Dit is waar al onze voorbeeldbestanden worden opgeslagen.
Om een plug-in voor jQuery te maken, hebben we ook een kopie van jQuery zelf nodig; de nieuwste versie is 1.31.js en is te vinden op http://jquery.com. Download het naar de poll map die we zojuist hebben gemaakt. Tot nu toe ziet de map er als volgt uit in Explorer (of een vergelijkbare bestandsverkenner):
Vervolgens kunnen we de database instellen die zal worden gebruikt om de peilingresultaten op te slaan; we kunnen dit eenvoudig genoeg doen met de MySQL Command Line Interface (CLI), hoewel front-end grafische gebruikersinterfaces ook kunnen worden gebruikt. Open de MySQL CLI en maak een nieuwe database met de naam poll met behulp van de volgende opdracht:
CREATE DATABASE poll;
De CREËER DATABASE commando doet precies wat het zegt in het blik en maakt een nieuwe database met de opgegeven naam. Zodra we een database hebben, moeten we een nieuwe tabel maken waarin de resultaten van de enquête worden opgeslagen. Voordat we dit kunnen doen, moeten we de nieuwe database selecteren; de GEBRUIK commando zal dit doen:
USE poll;
Om een nieuwe tabel te maken gebruiken we de CREËER TAFEL commando, met vermelding van de namen voor de kolommen in de tabel:
CREATE TABLE resultaten (keuzes VARCHAR (20), stemmen INT);
Als we dit op een site implementeren, beginnen we ?? met een lege tabel, maar zodat we sommige resultaten kunnen zien zonder de vraag zelf herhaaldelijk te beantwoorden, kunnen we wat dummygegevens in de tabel invoeren. De snelste en gemakkelijkste manier om dit te doen voor kleine datasets (slechts 5 rijen in dit voorbeeld) is om dit handmatig te doen, wat we kunnen doen met de volgende reeks commando's:
INVOEGEN RESULTATEN WAARDEN (?? keuze0 ??, 100); INVOEGEN resultaten WAARDEN (?? keuze1 ??, 67); INVOEGEN resultaten WAARDEN (?? keuze2 ??, 11); INVOEGEN RESULTATEN WAARDEN (?? keuze3 ??, 51); INVOEGEN resultaten WAARDEN (?? choice4 ??, 38);
De opdracht zou voldoende rechttoe rechtaan moeten zijn, vergeet niet om na elke regel op enter te drukken. Het enige opmerkelijke punt is dat de eerste rij dat is choice0 in plaats van keuze1 wat wordt gedaan om het werken met het JSON-object in ons script eenvoudiger te maken. Op dit punt moet uw CLI zoiets als de volgende screenshot weergeven:
We zijn nu klaar met de CLI, dus we kunnen het afsluiten en doorgaan naar onze volgende taak ?? het maken van de plug-in.
We moeten een aantal taken uitvoeren met de plugin-code; we moeten de DOM-structuur voor de widget maken, een handler toevoegen die luistert naar de indiening van de selectie, de resultaten doorgeven aan de server en de reactie verwerken, evenals de resultaten weergeven na verwerking. We kunnen ook wat suiker toevoegen in de vorm van foutmeldingen en geanimeerde resultaten.
Het gaat zeker een paar regels code aannemen, maar het zou de moeite waard moeten zijn, want we zullen zien hoe gemakkelijk het is om een robuuste, functionele en geavanceerde plug-in te maken die interactiviteit biedt en waarde toevoegt aan de pagina. Laten we een begin maken; voeg in een nieuw bestand in je teksteditor de volgende code toe:
Accentsconagua