Valikon luominen php css html: llä. Monitasoiset valikot PHP: ssä ja MySQL: ssä

Koska se laajentaa menu.php -moduulin sisältöä. Alla esitellään oma kehityksemme PHP -valikosta, joka on kirjoitettu tyhjästä muistikirjaan.

Tämä koodi on erityisen hyödyllinen dynaamisille sivustoille, joissa on itse kirjoitetut moottorit. Tarjoan kaksi koodiversiota, joissa on pieniä eroja (ero selitetään myöhemmin).

Aluksi annan likimääräisen sivustorakenteen, jolle tämä valikko sopii. Sivuston rakenteen pitäisi näyttää tältä (klassinen ulkoasu):

/index.html /razdel_1 //razdel_1/articles_1.html /razdel_1/articles_2.html ... /razdel_2 //razdel_2/articles_1.html /razdel_2/articles_2.html ... ... ... /razdel_N /articles_2 .html

Sivusto voi sisältää myös osioita:

/razdel_1/podzaderl_1//razdel_1/podzaderl_1/articles_1.html /razdel_1/podzaderl_1/articles_2.html ... /razdel_1/podzaderl_2/articles_1.html/razdel_1/podzaderl_2/articles

Tämä rakenne toimii myös ruokalistallamme vain pienillä eroilla.

Ehdotan erillisen tiedoston luomista php -valikkoa varten. Esimerkiksi menu.php olisi hyvä nimi tällaiselle tiedostolle. Valikon toteuttamiseksi valikkotyyli esitetään myös CSS: ssä, jotta siitä tulee heti enemmän tai vähemmän kaunis. Tämä tyyli on tietysti vain viitteellinen, koska sivustojen mallit ovat hyvin erilaisia.

CSS -valikkotyylin koodi:

.valikko (korkeus: 42 kuvapistettä; täyte: 0 0 0 16 kuvapistettä; tausta: url (kuvat / spacer.png) toista;). valikko li (näyttö: lohko; kelluva: vasen;). valikko aktiivinen (tausta: # 000011 ;) .valikko a (väri: #FFF; näyttö: lohko; rivin korkeus: 42 kuvapistettä; tekstin koristelu: ei mitään; täyte: 0 14px;). valikko a: hover (tausta: url (kuvat / spacer.png) toista ;)

Katsotaanpa nyt ensimmäistä PHP -valikon toteutusta, joka on hieman yksinkertainen.

PHP -valikkokoodin ensimmäinen versio

\ n "; for ($ i = 0; $ i ": "
  • "; kaiku" ". $ array_menu [$ i] [" name "]."
  • \ n ";) kaiku""; ?>

    Valikko voidaan jakaa kahteen osaan. Ensimmäinen sisältää tietotaulukon $ array_menu, joka sisältää osioiden nimet ja linkit osioihin. On olemassa mahdollisuus ladata nämä tiedot mySQL -tietokantaan, mutta tässä ei ole erityistä järkeä, koska näyte on hyvin pieni, joten tämä ei vaikuta työn nopeuteen millään tavalla.

    Toinen osa sisältää valikon tuloksen for -silmukan kautta. Silmukka vertaa sivuston osoitetta $ array_menu -taulukon osoitteeseen. Jos löytyy ottelu, näytämme valikon seuraavan osan, jossa on aktiivinen erikoisluokka:

  • muuten vain
  • ... Näin voimme korostaa valikon sitä osaa, jossa käyttäjä sijaitsee, jollakin värillä. Mielestäni tämä on välttämätöntä kaikille sivustoille, jotta käyttäjä voi ymmärtää, missä osiossa hän on.

    Taulukon järjestys säilyy, kun valikko näytetään sivustolla. Toisin sanoen taulukko on täytettävä siinä järjestyksessä, jossa valikko näytetään.

    merkintä:
    Jos osioiden otsikon URL -osoite (osoitteet) ovat muotoa:
    / razdel_1
    tai sellaista
    /razdel_1/nazvanie_razdela.html
    sitten array_menussa sinun on kirjoitettava tarkka vastaavuus:
    $ array_menu [$ i] ["url"] = "/ razdel_1"
    tai toisessa tapauksessa:
    $ array_menu [$ i] ["url"] = " / razdel_1 / nazvanie_razdela.html";

    Miten ensimmäinen valikkovaihtoehto toimii?
    Se korostaa valikkoa vain, jos olet osion otsikon osoitteessa. Jos esimerkiksi sivun osoite on /razdel_1/articles_1.html, valikkoa ei korosteta millään tavalla.

    Koodin toinen versio on muutettu versio ensimmäisestä ja tarjoaa mahdollisuuden korostaa valikon myös osioissa olevissa artikkeleissa.

    PHP -valikkokoodin toinen versio

    "; varten ($ i = 0; $ i ": "
  • "; echo" ". $ array_menu [$ i] [" title "]."
  • ";) else (echo ($ URL) == ($ array_menu [$ i] [" url "])?" "
  • ": "
  • "; echo" ". $ array_menu [$ i] [" title "]."
  • ";)) kaiku""; ?>

    Tätä analysoimme nyt. Ja niin, tehtävänä on tehdä pystysuora valikko avattavan luettelon muodossa.

    Miten tämä voidaan toteuttaa PHP: ssä? Erittäin yksinkertainen! Meillä on esimerkiksi tiedosto index.php, jonka pitäisi näyttää avattavan luettelon valitusta osasta riippuen vastaava sisältö sivulla. Tämä toteutetaan seuraavasti:

    1. Luomme .html -muodossa olevia tiedostoja, jotka sisältävät tulostamiseen tarvittavan sisällön.

    2. Luo (kirjoita) index.php -komentosarjassa tarvittavat ehdot asiaankuuluvien tietojen näyttämiseksi.

    3. Harkitse luotua komentosarjaa suoritettavan komentosarjan turvallisuuden kannalta.

    No, tavallaan, kun lopetin teorian, siirrymme käytäntöön. Ensin luomme staattisia sivuja .html -muodossa, jotka sisältävät tarvittavat tiedot. Siellä voit kirjoittaa mitä sydämesi haluaa :) Tämän seurauksena meidän pitäisi saada vähintään kaksi tiedostoa ensin. Html ja toinen. Html, vastaavasti, sitten ne voidaan tehdä niin paljon kuin haluat, kun olet ymmärtänyt koodin perusalgoritmin .

    Avattavan luettelon näyttäminen tiedostossa index.php luomme html -lomakkeen ja alla kirjoitamme seuraavan sisällön PHP -komentosarjan:



    Valikko PHP


    Pudotusvalikko PHP: ssä












    jos (isset ($ _GET ["missä"]))
    {
    jos ($ _GET ["where"] == 1)
    $ file = "first.html";
    jos ($ _GET ["where"] == 2)
    $ file = "second.html";
    include ($ tiedosto);
    }
    ?>


    Joten avattavan valikon koodi on valmis, ja mikä mielenkiintoisinta, se toimii normaalisti, mutta turvallisuuden kannalta se on haavoittuva.

    Tämän komentosarjan haavoittuvuus on muuttuja $ tiedosto ei ole alustettu, jolloin automaattisesti luodun muuttujan arvo siirtyy suoraan funktiolle sisältää, ja se puolestaan ​​yhdistää sen (muuttujan) onnistuneesti ja näyttää sen näytöllä. Ja se voi olla enemmän kuin vain .htaccess -määritystiedosto. Tämän skriptin hakkeroimiseksi riittää, että siirrät jossain parametriin arvon, jota koodi ei tarjoa, esimerkiksi 3. Ja koska tätä arvoa ei anneta komentosarjassa, niin vain muuttuja $ tiedosto alustus epäonnistuu. Siksi on mahdollista asettaa mielivaltainen arvo URL -merkkijonon kautta.

    http: //localhost/index.php? jossa = 3 & tiedosto = .htaccess

    Mutta tämä on niin, pieni poikkeama aiheesta. 😀

    Ratkaisu tähän ongelmaan on melko yksinkertainen, muuttuva $ tiedosto se on vain alustettava, ennen kuin sitä voidaan käyttää, eli antaa sille oletusarvo.

    Tässä tapauksessa, jos missä parametri välitetään komentosarjalle, muuttuja alustetaan oikein, muuten se on yksinkertaisesti tyhjä. Tämä on avattava PHP [turvallinen] -valikko.

    P.S. Skenaarioita luotaessa on otettava huomioon ja suljettava pois kaikki mahdolliset hyökkäysvektorit. Tämä on ainoa tapa luoda projekti, joka täyttää turvallisuussäännöt ja on asiakkaan vaatima. Ensi kertaan!

    Tässä artikkelissa näytän sinulle, kuinka voit luoda monitasoinen valikko PHP: ssä ja MySQL: ssä... Voit tietysti ajatella monia vaihtoehtoja sen luomiseksi, mutta tästä aiheesta esitettyjen kysymysten lukumäärän perusteella tarvitset esimerkin. Ja annan sen tässä artikkelissa. Huomaan heti, että tämä artikkeli on järkevä vain niille, jotka tietävät PHP ja osaa työskennellä MySQL... Kaikkien muiden on ensin käytävä tämä läpi tai luettava joitakin kirjoja PHP ja MySQL.

    Luo ensin tietokantaan taulukko, jossa on seuraavat kentät:

    • id- ainutlaatuinen tunniste.
    • otsikko- ankkurilinkit valikossa.
    • linkki- osoite, johon valikkokohta johtaa.
    • vanhemman_tunnus- vanhemman tunnus. Jos ylätasoa ei ole, se on NULL (tai voit laittaa toisen 0).

    Pöytä on järjestetty, nyt on aika PHP -koodi... Koko PHP -koodi on annettu alla:

    $ mysqli = uusi mysqli ("localhost", "root", "", "db"); // Yhdistä tietokantaan
    $ result_set = $ mysqli-> query ("SELECT * FROM` menu`"); // Valitse kaikki tietueet valikosta taulukosta
    $ items = array (); // Taulukko valikkokohteille
    while (($ row = $ result_set-> fetch_assoc ())! = false) $ items [$ row ["id"]] = $ row; // Täytä taulukko valinnalla tietokannasta
    $ lapset = array (); // Taulukko lasten sovittamiseksi vanhemmilleen
    foreach ($ items as $ item) (
    if ($ item ["parent_id"]) $ childrens [$ item ["id"]] = $ item ["parent_id"]; // Täytä taulukko
    }
    function printItem ($ item, $ items, $ childrens) (
    / * Näytä valikkokohta * /
    kaiku "

  • ";
    echo "". $ item ["title"]. "";
    $ ul = epätosi; // Onko lapsia renderoitu?
    kun taas (totta) (
    / * Ääretön silmukka, jossa etsimme kaikkia lapsia * /
    $ key = array_search ($ item ["id"], $ childrens); // Etsitään lapsi -elementtiä
    jos (! $ -avain) (
    / * Lapsia ei löytynyt * /
    jos ($ ul) kaiku ""; // Jos alaelementit näytettiin, sulje luettelo
    tauko; // Poistu silmukasta
    }
    poista ($ lapset [$ key]); // Poista löydetty elementti (jotta sitä ei näytetä uudelleen)
    jos (! $ ul) (
    kaiku "
      "; // Aloita sisäinen luettelo, jos lapsia ei vielä ollut
      $ ul = totta; // Aseta lippu
      }
      echo printItem ($ items [$ key], $ items, $ childrens); // Näytä rekursiivisesti kaikki lapset
      }
      kaiku "";
      }
      ?>

      Tämä koodi on täysin toimiva, mutta sinun on ymmärrettävä, että kukaan ei kirjoita tällä tavalla (etenkin tulosta läpi kaiku HTML -tunnisteet). Sinun tehtäväsi on ottaa algoritmi tästä koodista, mutta et itse koodia. Liitä sitten tämä algoritmi moottoriin. Yritin kommentoida huolellisesti lähtökoodia monitasoinen valikko PHP: ssä ja MySQL: ssä, mutta se ei tietenkään ole kaikkein läpinäkyvin ja vaatii jo varsin hyviä perustietoja. Jos et vieläkään tiedä hyvin PHP ja MySQL Sitten suosittelen lämpimästi käymään tämän läpi

      PHP -sivuston valikolla, jota ohjataan php -komentosarjoilla, on omat ominaisuutensa. Nämä eivät ole vain absoluuttisia tai suhteellisia linkkejä, vaikka näin voi hyvinkin olla, vaan pääsääntöisesti dynaamisesti luotuja sivupalkin linkkilohkoja, joissa on osioita ja alajaksoja sekä linkin lohkoja itse sivuston sisäisiltä sivuilta. Dynaamisesti luotu valikko on erittäin kätevä, koska se voidaan lisätä mihin tahansa sivustolle ja mikä tärkeintä, oikeaan aikaan. Toisin sanoen, kun vaihdat eri osioihin ja alajaksoihin, voit laajentaa dynaamisesti erilaisia ​​valikkolohkoja. Lisäksi ne voivat olla erilaisia ​​paitsi sisällön lisäksi myös muodoltaan ja suunnittelultaan. Staattisella sivustolla on myös täysin mahdollista tehdä tällaisia ​​temppuja, mutta se maksaa lisää mallitiedostoja ja paljon muita säätöjä. Vaikka php -muodossa kirjoitettu sivusto ei vaadi mitään tästä. Malli pysyy ennallaan. Kaikki ohjataan yhdellä tai useammalla yksinkertaisella php -komentosarjalla.

      Tämän vakuuttamiseksi riittää, että kirjoitat PHP -komentosarjan, joka muodostaa valikon dynaamisesti, esimerkiksi ensimmäisen otsikon ja pakotat sen laajentamaan tämän otsikon valikon aiemmin kirjoitetun komentosarjan avulla. Muut otsikot voidaan muodostaa samalla tavalla. Lisäksi itse käsikirjoituksen koodi tuskin muuttuu paljon. Vain tekstitiedosto muuttuu, mikä määrittää linkkien ja linkkien nimet. Tällaisen komentosarjan koodi on alla tekstissä.

      // Valikkorakentaja
      $ menu = @tiedosto ($ rubric1_menu);
      $ lines = count ($ menu);
      ($ i = 0; $ i< $lines; $i++)
      {
      list ($ menu_link, $ menu_name, $ menu_title) = räjähtää ("::", $ menu [$ i]);
      jos ($ page == rub1_part1 and $ i == 0) ($ refcolor = "style =" color: # cc0000 "";)
      elseif ($ page == rub1_part2 ja $ i == 1) ($ refcolor = "style =" color: # cc0000 "";)
      elseif ($ page == rub1_part3 ja $ i == 2) ($ refcolor = "style =" color: # cc0000 "";)
      muu ($ refcolor = "";)
      $ rubriikki1. = "

    • ". $ menu_name."
    • ";
      }
      ?>

      Jotta tällainen komentosarja toimisi, tarvitaan tekstitiedosto, johon valikkolinkkien nimet, linkit ja otsikko tallennetaan. Tällaisen tiedoston luominen ei ole vaikeaa, suorita vain Dreamweaverin päävalikon Tiedosto -> Uusi -komento, luo uusi html -asiakirja, kuten aiemmin on kuvattu, tarkista ja vaihda tarvittaessa uuden tiedoston koodaus UTF: ksi. -8 ja tallenna se nimellä rubric1.dat sille aiemmin luotuun tietokansioon. Tämän tiedoston koko polku on D: /Mysitephp/data/rubric1.dat. Alla olevan tiedoston sisältö on itse linkit, niiden nimet ja otsikot (vihjeitä). Lisäksi tämän komentosarjan suorittamiseksi se on yhdistettävä toiminnon avulla sisältää () main.php -mallimoottorissa.

      Rub1_part1 :: Osa 1 :: Osa 1 Otsikot 1 ::
      rub1_part2 :: Osa 2 :: Osa 2 Otsikot 1 ::
      rub1_part3 :: Osa 3 :: Osa 3 Otsikot 1 ::

      Lisäksi sinun on myös luotava pieni skripti asetuksineen, joka tallentaa koko sivuston osoitteen, polut sivukansioihin ja sivuston metakuvaukset, polut sivuston valikkotiedostoihin ja yhdistää sen toiminnon avulla sisältää () main.php -mallimoottorissa. Tätä varten sinun on luotava uusi php -tiedosto ja tallennettava se nimellä, kuten setings.php, php -kansioon. Tiedoston koko polku on D: /Mysitephp/php/setings.php ja sen sisältö näkyy alla.

      # kansio, jossa on html -asiakirjoja
      $ doctemplates = "mallit";
      # koko polku komentosarjahakemistoon
      $ turl = "http://mysitephp.ru";
      # tietokanta, jossa on tietoja
      $ rubric1_menu = "data / rubric1.dat";
      ?>

      Miten php -skripti valikon muodostamiseen toimii? Ensimmäiseksi $ -valikkomuuttujaan toiminnon avulla tiedosto () tekstitiedoston rubric1.dat sisältö sijoitetaan. Sitten toiminto Kreivi () laskee tekstitiedoston rivien määrän ja toimintoja lista () ja räjähtää () silmukassa itse valikko avautuu, missä liimaamalla viivoja (operaatiopiste . ) muodostetaan linkkirivit niiden nimillä ja otsikoilla, jotka sijoitetaan muuttujaan $ rubric1. Seuraavaksi on mallimoottorin komentosarja, jossa toiminto yhdistää valikkoskriptin sisältää (), siirtää $ rubric1 -muuttujan sisällön haluttuun kohtaan sivustolla käyttämällä aiemmin kuvattua toimintoa repl ().

      Tällainen valikko ei vielä toimi, koska se sisältää vain linkit, joissa on kaikki tarvittavat määritteet, mutta ei komentosarjaa, joka varmistaisi siirtymisen näihin linkkeihin ja näitä linkkejä vastaavien sivustosivujen avaamisen. Käsittelemme tätä php -komentosarjaa edelleen.

      Seuraavaksi voit päivittää projektin komentosarjalla valikon muodostamiseksi. Voit myös ladata päivitetyn projektin sivulta, joka avautuu rekisteröinnin ja ilmaisen tilauksen aktivoinnin jälkeen oikealla olevasta paneelista. Sivun osoite on tallennettava. Tältä sivulta tulevaisuudessa tulee linkkejä ladata projektipäivityksiä, erilaisia ​​hyödyllisiä skriptejä, ohjelmia, oppitunteja ja video -oppaita piireistä, ohjelmoinnista ja sivuston rakentamisesta aloittelijoille.

      Sivuston ladattua PHP -projektia, joka on päivitetty uusilla komentosarjoilla, voidaan nyt verrata edellä kuvattujen toimintojen tuloksiin. Lisäksi ristiriitojen poistamiseksi on hyödyllistä korvata projekti kokonaan ladatulla, suorittaa toiminto, käynnistää Denwer -palvelin, kirjoittaa selainikkunaan mysitephp.ru ja nähdä, mitä tapahtui. Mallin vasemmassa yläkulmassa ensimmäisen osion valikon pitäisi laajentua alla olevan kuvan mukaisesti.

      Mene ja sulaudu suosikki sosiaaliseen mediaasi

  •