Генеришите динамичке листе са Јкуери, пХп и МиСКЛ

Много пута приликом програмирања страница са пХп -ом и постављања упита у базу података морамо освежавати веб страницу тако да се пхп обрађује на серверу, консултовати базу података и затим вратити резултат.
Ово преусмеравање веба обично траје неколико секунди у неким случајевима приказујући кориснику празну страницу док се подаци обрађују и приказују. Да бисмо постигли транспарентнији интерфејс према кориснику приликом упућивања захтева серверу, можемо користити АЈАКС, технологију која ће нам омогућити да постављамо упите на веб страници којима је потребан одговор сервера без поновног учитавања. Започећемо пример са веб листе за управљање Агенцијом за возила.
Прво ћемо створити базу података у Мискл да бисте то урадили, користите нас Пхпмиадмин. Испод СКЛ код.
1) Креирамо базу података

ЦРЕАТЕ ДАТАБАСЕ ауто_агенци;

2) Затим ћемо креирати табеле

• а) Структура стола за сто возила

 НАПРАВИ ТАБЕЛУ АКО НЕ ПОСТОЈИ `возила` (` ид` инт (10) НОТ НУЛЛ АУТО_ИНЦРЕМЕНТ, `вехицле_типе` инт (255) ДЕФАУЛТ НУЛЛ,` спецификације` текст, `марк` варцхар (255) ЗАДНА НУЛЛ,` модел` варцхар ( 255) ДЕФАУЛТ НУЛЛ, `нормал_прице` децимал (10,2) ДЕФАУЛТ НУЛЛ,` десцриптион` варцхар (255) ДЕФАУЛТ НУЛЛ, `пхото1` варцхар (255) ДЕФАУЛТ НУЛЛ,` пхото2` варцхар (255) ДЕФАУЛТ НУЛЛ, ПРИМАРНИ КЉУЧ ( `ид`)) ЕНГИНЕ = ЗНАЧАЈНА КАРТА МИСИСАМ = латин1 АУТО_ИНЦРЕМЕНТ = 1; 

• б) Структура табеле за табелу ознака

 ЦРЕАТЕ ТАБЛЕ ИФ НОТ ЕКССТЕС `маркс` (` ид` инт (11) НОТ НУЛЛ АУТО_ИНЦРЕМЕНТ, `вехицле_типе` инт (10) ДЕФАУЛТ НУЛЛ,` марк` варцхар (200) ДЕФАУЛТ НУЛЛ, ПРИМАРИ КЕИ (`ид`)) ЕНГИНЕ = МиИСАМ ДЕФАУЛТ ЦХАРСЕТ = латин1 АУТО_ИНЦРЕМЕНТ = 1; 

• ц) Убацујемо жигове

 УМЕТАЈТЕ `марке` (` ид`, `возило_тип`,` марка`) ВРЕДНОСТИ (1, 1, 'ХОНДА'), (3, 1, 'АУДИ'), (4, 1, 'БМВ'), 

• д) Структура табеле за табелу модела

 НАПРАВИ ТАБЕЛУ АКО НЕ ПОСТОЈИ `моделс` (` ид` инт (11) НОТ НУЛЛ АУТО_ИНЦРЕМЕНТ, `вехицле_типе` инт (200) ДЕФАУЛТ НУЛЛ,` бранд ид` инт (200) ДЕФАУЛТ НУЛЛ, `модел` варцхар (255) ДЕФАУЛТ НУЛЛ , ПРИМАРНИ КЉУЧ (`ид`)) МОТОР = ЗНАЧАЈНА КАРТА МИСИСАМ = латин1 АУТО_ИНЦРЕМЕНТ = 1; 

• е) Убацујемо неке податке у табелу модела

 ИНСЕРТ ИНТО `моделс` (` ид`, `вехицле_типе`,` бранд ИД`, `модел`) ВРЕДНОСТИ (1, 1, 1, 'АЦЦОРД'), (2, 1, 1, 'ЈАЗЗ'), (3 , 1,1, 'ЦИВИЦ'); 

• ф) Структура табеле за тип стола_вехицуло

 НАПРАВИ ТАБЕЛУ АКО НЕ ПОСТОЈИ `вехицле_типе` (` ид` инт (10) НОТ НУЛЛ АУТО_ИНЦРЕМЕНТ, `вехицле_типе` варцхар (200) ДЕФАУЛТ НУЛЛ, ПРИМАРИ КЕИ (` ид`)) ЕНГИНЕ = ИнноДБ ДЕФАУЛТ ЦХАРСЕТ = латин1 АУТО_ИНЦРЕМЕНТ = 1; 

• г) Неке податке убацујемо у табелу типе_вехицуло

 ИНСЕРТ ИНТО `вехицле_типе` (` ид`, `вехицле_типе`) ВРЕДНОСТИ (1, 'Аутомобили'), (2, 'Мотоцикли') 

До сада смо креирали целу базу података.

Покрећемо структуру веб странице са пхп -ом, пример ће бити развијен у обичном пхп -у, али се може прилагодити било ком оквиру.
1) Повежите се са базом података Мискл креирањем датотеке цонфиг.пхп

Направићемо веб страницу која ће се звати индек.пхп где ћемо имати код за приказ листе возила, а затим филтрирати листу помоћу јкуери -ја. Распоред који користимо за водич је прилично једноставан.

Код унутар индек.пхп за приказ изгледа је следећи:

Затим креирамо горњу плочу:

 
 
 
Возила
 
Заштитни жигови
 
Модели
 

 
 
 Да бисте изабрали 
 
 Да бисте изабрали 
 
 Да бисте изабрали 
 

 

 

Затим ће доћи код листе са скл упитима, див ће тада послужити за приказ филтриране листе:

 $ валуе) {$ ров [$ кеи] = траке ($ валуе); }?> вар13 -> 
 
Возило
 
Марка
 
Модел
 
Пхото
 
Радње
 
 
 
 
 
 
Модификовати
 

 

Сада када листа ради, морамо креирати филтер са Јкуери -јем и програмирати функционалност која се односи на селецт. Првим одабиром возила додајемо упит и мењамо избор на следећи начин:

 Да бисте изабрали  

Приликом извршавања, изабрани ће бити учитани возилима:

Сада долази Јкуери за ово што ћемо додати у индек.пхп у горњој линији пре укључивања, Јкуери библиотеку преузету са хттп://јкуери.цом/довнлоад/ или повезати следећу скрипту и користити је са спољне путање.

Направићемо датотеку звану фунцтионс.јс за складиштење Јкуери кода и додати је на страницу испод претходне скрипте на следећи начин:

Прва скрипта ће бити она која при избору типа возила активира одабир са маркама

 $ (фунцтион () {$ ("# вехицле"). цханге (фунцтион () {// скрипта се активира када изаберем возило одабраног возила = $ (тхис) .вал () // узимам изабрану вредност/ /послати на страницу која ће извршити скл упит и вратити податке за унос у изабрани $ .гет ("хттп: //лоцалхост/проиецтос/агенциааутос/марцас.пхп? идвехицуло =" + возило, функција (подаци) { $ ("#марк"). хтмл (дата); // Узимам резултат и убацујем податке у ознаку за одабир});});}); 

Креирамо датотеку бранд.пхп која ће бити та која ће извршити упит који ће се затим учитати у Селецт Брандс:

Тако се приликом одабира типа возила активирају одабране марке које одговарају типу возила.

Сада ћемо активирати одабране моделе из ознаке, за то ћемо додати следећи код у фунцтионс.јпс:

 $ (фунцтион () {$ ("# бранд"). цханге (фунцтион () {бранд = $ (тхис) .вал () // Изабрана вредност $ .гет ("хттп: // лоцалхост / пројецтс / аутоагенци / модел .пхп? маркид = "+ ознака, функција (подаци) {$ (" # модел "). хтмл (подаци); // Узимам резултат странице и убацујем податке у изабрано});});}); 

Креирамо датотеку моделс.пхп за извршавање упита:

Коначно, при одабиру модела додаћемо исту скрипту која нам приказује листу, али филтрирану према одабраним опцијама, а резултат ћемо доделити див ид = "листи"
Јукери скрипта која активира листу из изабраног модела ће бити

 $ (фунцтион () {$ ("# модел"). цханге (фунцтион () {модел = $ (тхис) .вал () // Изабрана вредност $ .гет ("хттп: // лоцалхост / пројецтс / аутоагенци / листинг .пхп? идмодел = "+ модел, функција (подаци) {$ (" # листинг "). хтмл (подаци); // Узимам резултат странице и убацујем податке у див листинг});});}) ; 

Датотека листинг.пхп која ће извршити упит филтера:

 

 $ валуе) {$ ров [$ кеи] = траке ($ валуе); }?> вар13 -> 
 
Возило
 
Марка
 
Модел
 
Пхото
 
Радње
 
 
 
 
 
 
Модификовати
 

 

 

Коначно, као што је пример са филтрима који раде, недостајало би да вратите листу у оригинал и региструјете возило које ћемо видети у другом водичу.

ПажњаНаставак и више информација о овом водичу унесите овдеДа ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен