កន្លងមក យើងបានបង្កើតគំរូក្បាលទំព័ររួចហើយ។ ដូចនេះ នៅពេលដែលអ្នកអានចុចស្វែងរកការផ្សាយទាក់ទងនឹងពាក្យណាមួយនៅក្នុងជំពូកណាមួយ បើសិនជានៅក្នុងទំរង់បែបបទនៅក្នុងគំរូក្បាលគេហទំព័រមានការប្រកាសពីលក្ខណៈ action ពាក្យដែលត្រូវស្វែងរកនៅក្នុងជំពូកណាមួយនោះ នឹងត្រូវភ្ជាប់ទៅនឹងអាស័យដ្ឋានដែលជាផ្លូវចូលទៅកាន់ទំព័រដែលជាតំលៃរបស់លក្ខណៈ action ។
<!--src/layouts/Header.astro-->
---
---
<section class="header">
<header class='wrapper region'>
<div class='logo'>
<a href='/'><img src='/images/siteLogo.png' /></a>
<a href='/'>ខ្មែរវីដេអូ</a>
</div>
<form class='search' action="/search">
<select name='category'>
<option>រឿងខ្មែរ</option>
<option>រឿងថៃ</option>
<option>រឿងចិន</option>
<option>រឿងកូរ៉េ</option>
<option>ឯកសារ</option>
</select>
<input type='text' name='q' placeholder='សរសេរពាក្យត្រូវស្វែងរក...' required />
<input type='submit' value='ស្វែងរក' />
</form>
<div class='date'>
<script>
const datetime = new Date().toLocaleDateString('it-IT')
$('.date').html(datetime)
</script>
</div>
</header>
</section>
<style>
.header{
background: orangered;
}
.wrapper{
display: grid;
grid-template-columns: 25% auto 20%;
align-items: center;
padding: 10px 0;
}
.wrapper .logo{
display: grid;
grid-template-columns: 60px auto;
align-items: center;
grid-gap: 10px;
}
.wrapper .logo img{
width: 60px;
}
.wrapper .logo a{
font: 40px/1.5 StardosStencul, Limonf3;
color: white;
}
.wrapper .search{
display: grid;
grid-template-columns: 70px auto 15%;
}
.wrapper .search input, .wrapper .search select{
font: var(--body-font);
}
.wrapper .search [name='q']{
padding: 0 5px;
}
.wrapper .date{
text-align: right;
color: white;
font-size: 20px;
}
@media only screen and (max-width: 600px){
.wrapper{
grid-template-columns: 100%;
padding: 0 10px;
text-align: center;
}
.wrapper .logo{
grid-template-columns: 100%;
}
.wrapper .date{
text-align: center;
}
}
</style>
ឧបមាថា យើងជ្រើសរើសស្វែងរកកាផ្សាយនៅក្នុងជំពូក រឿងខ្មែរ និងសរសេរពាក្យថា ស្នេហ៍ ដើម្បីស្វែងរកកាផ្សាយដែលមានចំណងជើងមានពាក្យថា ស្នេហ៍ នៅក្នុងនោះ។ នៅពេលដែលយើងចុចខ្ទង់ Enter ឬចុចប៊ូតុង ស្វែងរក យើងនឹងឃើញនៅផ្នែកអាស័យដ្ឋាននៅលើ browser មានពាក្យដែលត្រូវស្វែងរកនិងជំពូកត្រូវបានភ្ជាប់ទៅនឹងអាស័យដ្ឋាននោះ។
http://localhost:4321/search?category=រឿងខ្មែរ&q=ស្នេហ៍
ពាក្យទាំងនោះជាភាសាអង់គ្លេសត្រូវហៅថា query string ដែលយើងអាចស្រង់យកមកប្រើប្រាស់ក្នុងការស្វែងរកការផ្សាយទាំងឡាយនៅក្នុងបណ្តុំទិន្នន័យ សំរាប់ផ្លូវចូលទៅកាន់ឯកសារ search.astro៕
