Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: HTML-sivulle ”tietokanta” ja hakulaatikko

Sivun loppuun

kristian [06.07.2016 10:33:56]

#

Hei. Voisiko joku ystävällinen sielu kertoa, kuinka html koodilla tehtäisiin etsintä sivu, joka olisi vain yksi tiedosto. eli sivun ylälaidassa etsintäpoxi, kun kirjoittaa jotain, ja painaa etsi, listaa se kaikki samalle sivulle. Qbasicilla (olen ajan tasalla...) tämä ei olisi ongelma väsätä, mutta se ei ole kovin käytännöllinen. Ideana olisi, että hakutermit, yms olisi kirjoitettuna "piiloon" koodiin, mutta näyttäisi vasta, kun kirjoittaa oikean hakutermin. Tämä siksi, että jos esim kirjoittaa 100.000+ sanaa, sivu aukeaa julmettoman kauan. Hiukan kuin sanakirja - joskin vain omaan käyttöön.

Teuro [06.07.2016 10:49:55]

#

Mistä scriptin pitäisi täsmälleen etsiä? Onko haettava data muun html koodin joukossa, vai onko esimerkiksi sisältö tietokannassa? Voitko kuvata täsmällisen alkutilanteen, syötteen ja halutun lopputulosen? Lopputulos mielellään kuvattuna sekä niin, että haettavaa löytyi ja niin ettei ei löytynyt.

Noin muutoin ongelmaa voit lähestyä varmasti myös purkamalla sitä osiin. Osaatko esimerkiksi tehdä html-sivun? Osaatko rakentaa lomakkeen? Osaatko vastaanottaa lähetettyä dataa?

kristian [06.07.2016 11:01:28]

#

Eli haettavat tekstit olisi koodin joukossa. Esim: hakusana "auto", tulos "audi, rols royse, fiat".

1 input hae$
10 if hae$ = "auto" then goto 20 else goto 100
20 print "audi, rols royse, fiat"
100 goto 1

näin qbasic tyyliin opastettuna

eli hakutermejä tulisi paljon, niin olisi hyvä upottaa ne koodiin, jolloin html sivulla ei kestäisi pientä ikuisuutta avautua. Koitin etsiä "kaikki" sivustot, mutta moni käytti googlea, yms, ja muut olivat useammassa tiedostossa. Toivottavasti tämä auttoi jonkin verran?

Vaihtoehtona tietenkin myös on, että löytyy jokin convertteri, millä saa qbasicilla tehdyn tällaisen softan muunnettua ainakin winukalle ja androidille, ilman, että tarvitsee qbasicin ajureita asentaa joka laitteeseeni.

Teuro [06.07.2016 11:08:52]

#

Sivun latautumista voisi ehkä nopeuttaa siirtämällä tietosisällön ulkoiseen datatiedostoon. Toisaalta voisihan jokaisen tietoalkion kääräistä oman tagin sisään, josta niitä voisi javascriptillä piilotella ja näytellä hakusanojen perusteella. Mikäli vaihtoehtoja on paljon, niin tämä on käyttäjälle päin luultavasti liian hidas.

Arvelisin kuitenkin, että hakusanoja ei kannata kirjoitella koodin joukkoon tuolla lailla. Mielestäni fiksumpaa olisi, että koodi noutaa hakusanan perusteella ulkoisesta tietolähteestä oikean tulostusrivin. Mikäli hakusana ei tuota tulosta pitäisi ehkä tulostaa jokin vakiolause.

Työkaluksi tällaiseen PHP tai python sopinee qbasicia paremmin.

kristian [06.07.2016 11:21:58]

#

Juu, nuo olisi muuten hyviä ideoita, mutta... Kun tarkoituksena omaan käyttöön, niin ei olisi tarkoitus nettiin laittaa ollenkaan, eli paikallisena tietokoneellani / kännykässä ainoastaan. Näiden vuoksi sellainen ohjelmointikieli, jonka käyttöliittymä normaalisti tunnistaa aina ilman lisäajureita / ohjelmia.

Teuro [06.07.2016 12:57:00]

#

Entäpä paikallinen palvelin, jolla asiaa voisit testata *suhteellisen helposti. Oman tai ilmaisen palvelimen avulla saisit luultavasti tehtyä tarpeisiisi soveltuvan sivun helpolla.

*hieman tuo vaatii säätämistä asentamisen jälkeen, jos haluat palvelimelle yhteyden oman koneen ulkopuolelta.

Alla on on muutama PHP-koodilistaus, jolla toteutin tuon määrittelysi mukaisen palvelun.

Ensimmäinen listaus sisältää hakusanojen syötön ja mahdollisten tulosten tulostamisen.

<?php
/** Otetaan mukaan tarvittavat funktiot **/
require_once("funktiot.php");

/** Noudetaan hakusanaa vastaavia alkioita. Sisäsltö saa olla missä tahansa tietovarastossa **/
if (isset($_GET['hakusana'])) {
	$data = hae($_GET['hakusana']);
}
?>

<!DOCTYPE html>
<html>
	<head>
		<title>HTML-etsintä</title>
	</head>
	<body>
		<!-- Hakulomake sisältää syöttökentän ja lähetyspainikkeen -->
		<form action="" method="get">
			<input type="text" name="hakusana" />
			<input type="submit" value="etsi" />
		</form>

		<?php if (isset($data)) : ?>
			<ul>
				<?php foreach ($data AS $tieto) : ?>
					<?php $alkiot = explode(",", $tieto); ?>
					<?php foreach ($alkiot AS $alkio) : ?>
						<li><?= htmlspecialchars(trim($alkio)); ?></li>
					<?php endforeach ?>
				<?php endforeach ?>
			</ul>
		<?php endif ?>
	</body>
</html>

Toisessa osassa on toteutettu funktio 'hae'

<?php

function hae($hakusana) {
	$rivit = file("tieto.txt");
	$hakusana = trim($hakusana);
	$tulosjoukko = Array();

	for ($i = 0; $i < count($rivit); ++$i) {
		$tieto = explode("|", $rivit[$i]);

		if ($hakusana == trim($tieto[0])) {
			$tulosjoukko[] = $tieto[1];
		}
	}

	if (count($tulosjoukko) == 0) {
		$tulosjoukko[] = "Ei löytynyt haettua sanaa {$hakusana}";
	}

	return $tulosjoukko;
}

kolmannessa on vielä tietosisältö. Tämä voisi olla myös tietokanta, jolloin haku olisi vähän erilainen toteukseltaan. Kutsu olisi silti ihan samanlainen.

auto|audi, rols royse, fiat
hevonen|Koni, polle, heppa

kristian [06.07.2016 13:06:03]

#

Kokeilenpa tuota, kun ei nyt muutakaan ole tarjolla toistaiseksi :)

Metabolix [06.07.2016 13:45:39]

#

Vähän epäselväksi jää kysymyksestä, miten haun pitäisi tarkalleen toimia, mutta lähdetään nyt vaikka ideasta, että on rivejä ja näytetään ne rivit, joilla hakusana esiintyy.

<!DOCTYPE html>
<meta charset="UTF-8" />
<title>Hakujuttu</title>

<!-- Tiedot erikseen: -->
<script src="tiedot.js"></script>
<!-- Tai samassa tiedostossa: -->
<script>
var tiedot = [
  "auto, Audi, Fiat",
  "auto, kaara, menopeli",
  "hevonen, polle, koni",
  "hevonen, nisäkäs, selkärankainen"
]
</script>

<script>
function hae(sana) {
  var tulos = []
  for (var i = 0; i < tiedot.length; ++i) {
    if (tiedot[i].indexOf(sana) >= 0) {
      tulos.push(tiedot[i])
    }
  }
  return tulos
}
function hakulomake(form) {
  document.getElementById("tulos").textContent = hae(form.hakusana.value).join("\n")
}
</script>

<form action="#" onsubmit="hakulomake(this); return false;">
  <input type="search" name="hakusana" />
  <button type="submit">Hae!</button>
</form>
<pre id="tulos"></pre>

Teuron vastauksesta tulee mieleen eräs vasaraan liittyvä vitsi. PHP:n käyttö ei tässä tapauksessa hyödytä vaan tuottaa vain lisäongelmia, kun pitäisi olla se palvelin, jota kysyjällä ei ole. JavaScriptilla pyydetty ominaisuus on varmasti vähintään yhtä helppo tehdä.

kristian [06.07.2016 15:47:11]

#

Loistavaa Metabolix !! Juuri sellainen, tai ehkä parempikin, kun hakee kaikki sanat ryhmästä :) Tuolla pärjään hyvin. Iso kiitos!!


Sivun alkuun

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta