gå i gang med at bygge din blog, analysere. er

, begynde at bygge din blog med analysere. er,,,,, 66,,,,,,,, 19,,,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss. denne post er en del af en serie kaldet bygge din blog med parse.js.get begyndte at bygge din blog med parse.js: arbejde med data,,, hvad du vil skabe,,, har du nogensinde været glad for tanken om en web - projekt, men fandt det elendige til at gøre det løb ud og arbejde på en server?med parse.js, alle, der forstår det grundlæggende i  : forskning og javascript kan skabe en dynamisk websteder og virker web apps med lethed.  ,,, i denne lektion, jeg vil tage dig   gennem hele   proces med at skabe en blog system med analysere. er   fra bunden.du vil bruge alle de bootstrapping værktøjer og praksis, idéen om en hurtig udarbejdelse af prototyper, refactoring og mvc rammer.ved udgangen af denne serie, bør de være i stand til at skabe en cms sted selv.,, men forsøger at være så detaljeret som muligt, denne lektion er påtage sig en grundlæggende viden om: css, javascript /jquery,   og github.hvis du ikke er bekendt med ovennævnte redskaber, der er masser af store tutorials her på tuts +, som du kan se, har udvikling, miljø, lad os komme i gang med at etablere vores udvikling miljø.du får brug for   en lokal undersøgelse - en webserver, en data - og version kontrol.som tidligere nævnt denne forelæsning ikke kræver viden om backend.jeg vil tage dig med skridt for skridt.de er fri til at springe den del over, hvis du allerede har dem,.,, trin 1: installation af xampp, efter at prøve flere forskellige løsninger, xampp stadig er den nemmeste måde at fælde en lokal test - serveren, jeg fandt.jeg vil derfor benytte xampp som den lokale undersøgelser server i denne forelæsning.,, hvis du ikke har gjort det, så   downloade xampp her.vælge en, der passer til dit system og installere det.,,,,, jeg brug mac her, så jeg vil bruge det som eksempel fra nu af.hvis du bruger andre styresystemer, skal være meget lignende.,,, efter du installere det, iværksætte xampp, og start ", apache webserver,".,,,,, nu, hvis du besøger   http: ///////////////localhost   i din browser, skulle du se denne misligholdelse xampp side.det betyder, at det er oppe og køre.,,,,, trin 2: skabe en ny github side, videre, lad os skabe et nyt tag repo   på   github.jeg kalder det  , blog,   bare så det er kort og klart for mig.   at gøre det arbejde, som en web - server, er vi nødt til at   fastsættes det   som en github side.,,  , tilføje en ny filial, gh sider.,,,,, så indstillinger, der   gh sider,   som misligholdelse filial.,,,,, stor.lad os komme ind i kommando linjer og klon, at filialen på github i xampp er, htdocs,   mappe. $cd /ansøgninger /xampp /xamppfiles /htdocs $git klon https: //dit skvat https klon url her, sejle i så   repo - folder du klonede, skabe en simpel  , index.html,   fil, og skriv, hej,   i det. $cd blog $echo 'hej verden > index.html, tjek din localhost og sikre, at det virker.,,,,, stor.så lad os få det til at   github. $så tilføje. $så begå - er "tilføje index.html" $så skub, gå til   http://yourusername.github.io/reponame, giv den et par minutter,  , og du vil se din  ,., er nu lever:),,,,, trin 3: få din regning. på analysere. kom, det er meget nemt at være vært for statisk indhold på github side, men når det kommer til backend, det kan blive vanskeligt med github side.heldigvis har vi nu parse.js.vi kan bruge parse.com som vores data - og kommunikere med den javascript.på den måde, vi behøver kun at være vært for html, css og   javascript   filer på github.,, gå videre og register på analysere. kom  , hvis du ikke har gjort det.  ,,,,, nu,  , du har dine data server i skyen.,,, bootstrap statisk html skabelon, nu   lad os forberede en statisk version af blog system, vi vil gøre.for at vise dig, hvor hurtigt du kan bootstrap igennem det her, jeg vil bare   udnytte eksempel blog model fra   støvlestrop.igen, hvis du allerede er temmelig fortrolig med bootstrap eller har du en statisk websted, der allerede er velkommen til at gøre det på din måde.hvis du er ny bootstrap, følg med.,, trin 1: downloade bootstrap, først, downloade bootstrap   (i øjeblikket er vi ved     version 3.2.0 her), luk den, og dens indhold   i din, xampp /xamppfiles /htdocs /blog, mappe.  ,,,,, trin 2: begynd med bootstrap grundlæggende skabelon, redigere,.,, at grundlæggende skabelon af bootstrap.det er en grundlæggende html struktur med   forbindelser til  , støvlestrop. min.css, støvlestrop. min.js, og  , jquery. min.js,.med udgangspunkt i en model, som det vil spare dig en masse tid,.,, <!doctype html > < http: //lang = ", en" > < head > < meta - charset = "utf - 8" > < meta - http equiv = "x-ua-compatible" indhold = "ie = kant" > < meta - navn = "viewport" indhold = "bredde = anordning bredde, oprindelige omfang = 1 > < afsnit > bootstrap 101 skabelon < /afsnit > <!- bootstrap... > < forbindelse href = "css /støvlestrop. min.css" rel = "stylesheet" > <!- html5 - og respond.js ie8 støtte af html5 elementer og medier forespørgsler - > <!- advarsel: respond.js virker ikke, hvis de på side via fil: //- > <!- hvis det er [9] > < manuskript src = "https: //oss. maxcdn. kom /html5shiv /3.7.2 /html5shiv. min.js" > < /manuskript > < manuskript src = "https: //oss. maxcdn. kom /reagere /1.4.2 /reagere. min.js" > < /manuskript > <![endif] - > < /head > < krop > < h1 > hallo, verden!< /h1 > <!- jquery (nødvendig for bootstrap er javascript plugins). > < manuskript src = "https: //ajax. googleapis. kom /ajax /libs /jquery /1.11.1 /jquery. min.js" > < /manuskript > <!- omfatter alle udarbejdet plugins (nedenfor), eller med de enkelte sager, som er nødvendig - > < manuskript src = "js /støvlestrop. min.js" > < /manuskript > < /organ > < /html >,, opdatere og gøre ja, det virker.,,,,, trin 3: kopiere eksemplet blog model over, gå på en åben eksemplet blog fra bootstrap:   http: //getbootstrap. kom /eksempler /blog /, på den hjemmeside, højre klik og vælge ", betragtning kilde".vi ønsker at kopiere alle indhold i  , < krop > over for vores  , index.html,   og   erstatte  , < h1 > hallo, verden!< /h1 > i den grundlæggende model, ikke kopiere, < manuskript >, mærkater, eftersom vi allerede har alle javascript filer, vi har brug for, bør de nu har denne side:,,,,, trin 4: kopiere eksemplet blog stil og lægger det i indeks.:, mærke stil er ikke færdig endnu.det er, fordi vi har brug for, blog. css, blog specifikke stylesheet bygget oven på bootstrap grundlæggende styles.,, og nu er det fra kilden kode:   http: //getbootstrap. kom /eksempler /blog /blog. css, forstået fil, og sætte din blog /css, mappe, og knytte den i index.html nedenfor,  , støvlestrop. min.css:,, <!- bootstrap... > < forbindelse href = "css /støvlestrop. min.css" rel = "stylesheet" > < forbindelse href = "css /blog. css" rel = "stylesheet" >,, og nu styles bør være ret, og vi har vores statisk skabelon klar.,,,,, opstilling og tilslutning til den analysere database, for at gøre vores statisk   blog dynamiske, må vi først fælde sin egen database om analysere. kom.,, trin 1: skabe en ny app, gå til   parse.com instrumentbræt, og klik på ", skabe nye app".  ,, lad os kalde det blog, for nu.,,,,,, når den er oprettet, gå til "hurtigt skal iværksættes guide - data - web - eksisterende projekt,",,,,, trin 2: tilføje parse.js i index.html, som hurtigt skal iværksættes vejledning, tilføje, parse.js, til din index.html,   først.men i stedet for at det på < head >,, du kan   lagde det bare   under jquery:,, <!- jquery (nødvendig for bootstrap er javascript plugins). > < manuskript src = "https: //ajax. googleapis. kom /ajax /libs /jquery /1.11.1 /jquery. min.js" > < /manuskript > <!- parse.js - > < manuskript src = //www.parsecdn. kom /er /parse-1.2.19. min.js "> < /manuskript >,, trin 3: test analysere sdk, fortsætter, skabe en, blog.js, under din blog /er, folder med din   anvendelse id og javascript nøgle, og nogle test.de findes i dine hurtigt skal iværksættes vejledning:,, $(function() {analysere. $= jquery; //erstatte denne linje med det på din hurtigt skal iværksættes vejledning side analysere. sæt ("w8vtw6mtre3g0scteypzqc6uzj2kzoq6gbv0j6zc", "vvayp3edz6qh0qmttzpwgej2if4f2m8qja10safq"), var testobject = analysere objekt. udvide ("testobject"), var testobject = nye testobject(); testobject. redde ((fu: "bar"}). (funktion (indsigelse) (varsling ("yay!det virkede "))))), at gemme det, og forbinde dette javascript fil i din, index.html, nedenfor, støvlestrop. min.js,.,, <!- omfatter alle udarbejdet plugins (nedenfor), eller med de enkelte sager, som er nødvendig - > < manuskript src = "js /støvlestrop. min.js" > < /manuskript > < manuskript src = "js /blog. er" > < /manuskript >,, mind, index.html,   på din localhost igen, og du vil være i stand til at se denne indberetning budskab:,,,,,. betyder det, at du er forbundet til din blog database i sky:),,, hvis du tjekker din "data browser" på parse.com nu, - vil i se den testobject du skabte.,,,,, konklusion, vi i dag har sat alle de servere, vi har brug for, nemlig xampp som vores lokale undersøgelser   server, github sider som webserver, og parse.com som vores data - server.vi har også en grundlæggende blog skabelon i stedet, og det er nu tilsluttet den database,.,, i   i næste mødeperiode, vil jeg lære dig, hvordan man   tilføje     blog fra analysere data browser, hente den med javascript, og gøre det på forsiden.,, tjek kilde fil hvis du blev fanget.og læg en   kommentar, hvis du møder vanskeligheder efter.

Final product image
XAMPP website
XAMPP - Manage Servers - Start Apache Web Server
Localhost when XAMPP is running
Add a new branch gh-pages
Set gh-pages as the default branch
Localhost - hello world
GitHub Page - hello world
Parsecom website
Put Bootstrap in blog folder
Add Bootstrap basic template
Add example blog template
Static template
Create a blog app on Parsecom
Parse Quickstart Guide
Success alert message
Parse Data Browser



Previous:
Next Page: