Hoe pagina responsive maken in PHP?

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Innovatieve, nauwkeurige Senior PHP Developer voor

Eind jaren ’90 is dit bedrijf opgericht. Ze hebben zich altijd beziggehouden met het ontwikkelen van software voor overheidsinstanties. Dit zijn instanties waaronder bijvoorbeeld ook onder andere : de belastingdienst, burgerszaken, verschillende bedrijven, notarissen, incassobureau’s en ook nog bewindvoerders. Momenteel tellen ze 20 medewerkers, waarvan 2/3 deel allemaal developers zijn. Doordat ze de enigste aanbieder van dit soort software op de markt zijn, groeien ze erg hard. Door de enorme groei, hebben ze dan ook concrete groeiplannen in het verschiet. Functie-omschrijving Het bedrijf wordt door allerlei instanties ingeschakeld. Tegenwoordig wordt alles digitaal geregeld en gezien de essentie van dit soort

Bekijk vacature »

Ervaren senior C# developer in Arnhem gezocht

Organisatie Voor een van mijn businesspartners uit de omgeving van Arnhem ben ik op zoek naar een ervaren senior C# ASP.NET developer. Deze organisatie maakt complexe software producten voor bepaalde bedrijfsprocessen. Denk hierbij aan beslisregelsystemen, klachtenmanagementsystemen, digitale formulieren of een combinatie hiervan in één portaal. De software wordt specifiek op elke klant zijn wens aangepast. Bij de klanten moet je denken aan enerzijds provincies, gemeenten en overheidsinstanties en anderzijds aan banken, hypotheekverstrekkers en verzekeringsmaatschappijen. Binnen het bedrijf, van circa zestig man groot, heerst een informele sfeer. Collegialiteit staat er hoog in het vaandel, wat je terugziet in de wekelijkse vrijdagmiddagborrel

Bekijk vacature »

PLC Ontwikkelaar Machines Siemens 2.800 - 4.500

Functieomschrijving PLC Ontwikkelaar Machines Siemens 2.800 - 4.500 Voor de vacature als PLC Ontwikkelaar Machines Lochem Siemens ga je het volgende doen: Als besturingsengineer ben je verantwoordelijk voor het analyseren, (mede)ontwikkelen en implementeren van oplossingen voor problemen en storingen aan productielijnen. Naast het oplossen van storingen heb jij de ambitie om onze productielijnen en –processen te optimaliseren en continu te verbeteren. Inhoudelijke aspecten: Als gedreven Besturingsengineer adviseer jij collega’s. Ook het beheren van documentatie, opmaken van tekeningen, doen van voorstellen (en uitvoeren) van verbeteringen / modificaties, beheer van software, begeleiden van externe firma’s en het veilig en up-to-date houden van

Bekijk vacature »

Peter Brok

Peter Brok

14/08/2018 20:34:28
Quote Anchor link
Op mijn pagina haal ik gegevens uit Mysql en geef deze weer binnen een Div element op de pagina. Tijdens het ophalen van de data komen er drie blokjes op een rij. Daarna komen de volgende Div blokje eronder. Ik heb dat gedaan met de volgende If else. $left = 100; $left= $left + 270; if ($left > 810) {$left = $left - 810; $top = $top + 390;} else {}
Dit werkt perfect.

Maar nu wil ik de pagina responsive maken en moeten alle blokjes onder elkaar komen te staan. Ik moet dus de If Else aanpassen, op zich makkelijk, maar nu de vraag: Hoe verander ik nu de variabelen als de pagina op bv een smartphone wordt getoond? Voorheen toen de website in HTML was werd automatisch de CSS aangepast, maar dat gaat nu niet meer. Ik hoop dat het een beetje duidelijk is, heeft iemand een oplossing?

De variabelen die ik net benoem zouden bijvoorbeeld in de plaats komen van 270 en 810.
 
PHP hulp

PHP hulp

14/11/2018 02:37:08
 
- Ariën -
Beheerder

- Ariën -

14/08/2018 20:52:14
Quote Anchor link
Zelf zou ik aanraden om een grid-framework te gebruiken, zoals de Bootstrap 4.

Met gebruik van de juiste stijlen kan je prima de site zo responsive maken zoals je maar wilt.

Overigens snap ik niet hoe je PHP hiervoor wilt inzetten. Hiermee kan je geen browserformaten detecteren.
Gewijzigd op 14/08/2018 20:53:41 door - Ariën -
 
Rob Doemaarwat

Rob Doemaarwat

14/08/2018 21:26:36
Quote Anchor link
Met screen.width kun je in javascript de breedte van het scherm uitlezen (in pixels). Als je dit op je eerste pagina doet en deze waarde dan op de een of andere manier doorsluist naar de server, dan kun er in de volgende pagina's gebruik van maken.

Maar het is veel netter om dit client-side te doen dmv CSS (en je HTML dus generiek op te zetten).
Gewijzigd op 14/08/2018 21:27:12 door Rob Doemaarwat
 
Ben van Velzen

Ben van Velzen

14/08/2018 21:46:05
Quote Anchor link
Quote:
Voorheen toen de website in HTML was werd automatisch de CSS aangepast, maar dat gaat nu niet meer.

PHP spuugt HTML uit, dus ja, dat gaat wel degelijk.
 
Peter Brok

Peter Brok

14/08/2018 22:36:38
Quote Anchor link
Ben, maar ik overrule toch de css door $top en $left? Dan kan ik dat daarna niet meer veranderen in mijn css. Of mis ik iets? Eigenlijk zou ik de variabelen in mijn css moeten kunnen zetten. Ik heb dat geprobeerd aan aan de hand van een voorbeeld maar dat is niet gelukt.

echo '<div id="webblock_sales" style="top: '. $top. 'px; left: '. $left. 'px;>';
 
- Ariën -
Beheerder

- Ariën -

14/08/2018 22:41:33
Quote Anchor link
In-line CSS..... Begin daar liever niet aan. Een groot drama bij ontwikkelen.
Een grid-framework is echt wat je nodig hebt. Die schaalt precies tussen een aantal voorgedefinieerde breakpoints aan de hand van de resolutie van je browser. Het is zonde om dit zelf te berekenen en uit te stippelen. Tenzij je graag het wiel dan opnieuw ontwikkelt, maar dan niet geheel rond omdat het niet netjes is vanwege inline-css en plaatsbepalingen van je elementen,
 
Rob Doemaarwat

Rob Doemaarwat

14/08/2018 22:42:14
Quote Anchor link
Moet dit een soort staaf- of Gantt diagram worden?
 
- Ariën -
Beheerder

- Ariën -

14/08/2018 22:43:57
Quote Anchor link
Gezien de naam block, denk ik aan een onderdeel van een web-dashboard, met blokken die responsive moeten zijn, en gestapeld kunnen worden.

Klopt dat, Peter?
 
Peter Brok

Peter Brok

14/08/2018 22:52:29
Quote Anchor link
Arien, dat detecteren doe ik nu in css dmv bijvoorbeeld:

@media only screen and (min-width: 320px) and (max-width:530px), only screen and (min-device-width: 320px) and (max-device-width:530px){

En dat is ook mijn probleem de positie van het Div Element kan ik daar prima regelen dmv een andere cascade style sheet. Maar nu ik de posities overruled heb dmv van de twee variabelen, zie boven. Gaat dat niet meer. Ik kan mij niet voorstellen dat ik de enige ben met dit probleem.

Toevoeging op 14/08/2018 22:58:10:

Arien, kijk even naar www.feelinghomecuracao.com. Als je zoekt op huizen in een bepaalde prijsklasse zie je de blokjes met informatie. Zoals het nu is, is alles met de hand ingevoerd, dus de positie van elk blokje is in CSS geregeld. Nu wil ik met Mysql gaan werken en moet alles uit de database komen en moeten die blokjes op een andere manier op het scherm komen. Ik zie nog even niet hoe. De andere suggesties moet ik nog opzoeken en uitproberen
 
- Ariën -
Beheerder

- Ariën -

14/08/2018 23:15:41
Quote Anchor link
Het gebruik van MySQL is niet echt relevant in deze zaak. Het gaat immers om het weergeven van de data.
Of deze uit een database komt, of uit een tekstbestand, of hardcoded in je PHP-bestand staat. In je HTML-document is het toch hetzelfde.

Opsich kan je ook prima met media-queries in CSS werken, zoals je al zegt. Het kan ook prima, maar het kost wel wat tijd om alles netjes te positioneren en uit te testen. Met een grid-framework kan je dit in de HTML al netjes regelen aan de hand van classes. Het is efficiënter, eenvoudiger en makkelijker onderhoudbaar.

Ik zou wel je HTML-structuur even controleren, want ik zie halverwege opeens een doctype voorbij komen. Die hoort daar uiteraard niet. Ook zou in in-line styles toch liever vermijden. Met de trapsgewijze (cascading stylesheets) structuur met betrekking tot het inladen van de CSS door je browser, kan dit soms voor rare effecten zorgen of voor lastig te debuggen problemen.
Gewijzigd op 14/08/2018 23:18:07 door - Ariën -
 
Peter Brok

Peter Brok

14/08/2018 23:36:17
Quote Anchor link
Dank je wel tot zover Arien. Hieronder de code van die blokken waar ik het over heb, ik begrijp even zo gauw niet wat je bedoelt met het Doctype, maar ik ga daar naar zoeken.

Ik weet ook niet hoe ik ipv met de While functie (while ($row = $result->fetch(PDO::FETCH_ASSOC)) { ) op een andere manier die blokken kan positioneren, als dat met behulp van CSS kan dan graag natuurlijk.

Het is duidelijk dat ik geen Php specialist ben, ben eigenlijk net een paar weken bezig, Loop steeds weer tegen een probleem aan, maar weet het altijd (met behulp van) weer op te lossen. Dit is echter zo een lastige dat k twijfel of ik wel op de goede weg ben met Php. Terwijl er zoveel voordelen zitten aan de database voor mijn website. Ik ga kijken of ik kan vinden wat je bedoelt met grid-framwork. Nederland zal nu wel slapen, hier nog niet, morgen hoop ik verder.


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!-- Webblock -->        
<div id="webblock_row1_col1_sales">    
    
<div id="webblockphoto" style="top: 13px; margin: 0 -115px;">

<a href="rentals/6/luxe_villa_bottelier_curacao_te_huur/luxe_villa_bottelier_curacao_te_huur.php" >    

    
<img alt="" src="rentals/6/luxe_villa_bottelier_curacao_te_huur/slideshow/luxe_villa_bottelier_curacao_te_huur (1).jpg        
" width="230" height="173" /></a>        
<div id="webblocknieuw" style="top: 145px; margin: 0 -50px;"><p class="nieuw">Nieuw!</p></div>        
<div id="text">        
<p class="forsale">Te Huur: Naf 5000 p/m</p>        
<p class="headerindex22">Villa op Bottelier</p>        
<p class="locatieindex22">Bottelier</p>        
<p class="descriptionindex22">Luxe Villa met Prive Zwembad in Bottelier te Huur. Bottelier is zeer centraal gelegen tussen Jan...</p>        
<div id="all_icon">        
<div id="pool"><img alt="" src="fotos_basic/pool.jpg" title="Zwembad"/></div>        
<div id="oppervlakte"><p class="icon">Woonopp: --- m2</p></div>        
<div id="bed"><img  alt="" src="fotos_basic/bed.jpg" title="Slaapkamers" style="float:left;"/><p class="icon">&nbsp;6</p></div>        
<div id="bad"><img  alt="" src="fotos_basic/douche.jpg" title="Badkamers" style="float:left;"/><p class="icon">&nbsp;4</p></div>        
</div></div>        
</div>        
</div>        
<!-- Einde Webblock-->        
    
                
                

<div id="webblock_row1_col2_sales">
<!-- Webblock Advertentie-->
<div id="webblockphoto" style="top: 13px; margin: 0 -115px;"><img alt="" src="fotos_basic/feeling_home_curacao_gratis_adverteren2.jpg" width="230" height="173" />
<div id="text">
<p class="forsale">Feeling Home Cura&#231ao</p>
<p class="headerindex22">Gratis Adverteren</p>
<p class="locatieindex22">&nbsp;</p>
<p class="descriptionindex22">U wilt uw woning op Cura&#231ao verhuren? Bij ons kunt u gratis adverteren. Neem contact met ons op!</p>
<p class="moreinfo">
<a class="speciaal" href="http://www.feelinghomecuracao.com/feeling_home_curacao_contact.php">Meer informatie</a></p>
</div>
</div>
<!-- Einde Webblock Advertentie-->
</div>


[size=xsmall][i]Toevoeging op 14/08/2018 23:40:05:[/i][/size]

Ps, hier de code zoals ik het doe met php en mysql. Is nog in een testfase en staat niet online.

<?php

$top
= 200;
$left = 0;
$dagen_verschil_nieuw = 5;
  
   $selectie_string = "SELECT f.id, f.invoerdatum, f.soort, f.koop, f.prijs, f.object, l.wijken, f.webblocks_index, f.tekst, f.opp_object, f.opp_kavel, f.slaapkamers, f.badkamers, f.object_nummer, f.zwembad FROM tabel_feeling f, tabel_locatie l
   WHERE f.webblocks_index = 1 AND (f.locatie = l.nummer)"
;

          $db = new PDO('mysql:host=localhost;dbname=feeling_home', 'root', '');

$query = $selectie_string;


            
    $result = $db->query($query);


        while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
        
        switch ($row["koop"]) { case "1": $koop2 = "Koop"; break; case "2": $koop2 = "Huur"; break;}
        switch ($row["zwembad"]) { case "1": $zwem2 = "zwem.jpg"; break; case "2": $zwem2 = "leeg.jpg"; break; case "2": $zwem2 = "zwem.jpg"; break; case "0": $zwem2 = "leeg.jpg"; break;}
        switch ($row["koop"]) { case "1": $kk2 = " kk"; break; case "2": $kk2 = " p/m"; break;}
        
        if ($row["slaapkamers"] == 0) {$slaap2 = "";} else {$slaap2 = $row["slaapkamers"] ;}
        if ($row["badkamers"] == 0) {$bad2 = "";} else {$bad2 = $row["badkamers"] ;}
        
        if ($row["soort"] == 3) {$opp2 = $row["opp_kavel"]; $woon2 = "Perceel-";} else {$opp2 = $row["opp_object"]; $woon2 = "Woon-"; }
        
        $a = $row["id"];
        //echo $row["invoerdatum"]. '<br/>';
        
        $nu = strtotime("now");
        
        $invoer = strtotime($row["invoerdatum"]);

       echo round(($nu - $invoer)/86400, 0) . '<br/>';
      
$r=  round(($nu - $invoer)/86400, 0);
        
       if ( $r > $dagen_verschil_nieuw){$nieuw2 = ""; $webblock2 = "";} else {$nieuw2 = "Nieuw!"; $webblock2 = "webblocknieuw";}
                
echo '<div id="webblock_row1_col1_sales" style="top: '. $top. 'px; left: '. $left. 'px;>';
echo '<div id="webblock_row1_col1_sales">    ';    
echo '<div id="webblockphoto" style="top: 13px; margin: 0 -115px;">';
echo '<a href="object_feeling_7.php?object_id='.$a.'" >    ';
echo '<img alt="" src="fotos/' .$row["object_nummer"]. '/1.jpg';        
echo '" width="230" height="173" /></a>    ';    
echo '<div id="'. $webblock2 . '" style="top: 145px; margin: 0 -50px;"><p class="nieuw">'. $nieuw2 . '</p></div>';        
echo '<div id="text">    ';    
echo '<p class="forsale">Te '. $koop2 . ': Naf ' . number_format($row["prijs"],0,",",".") .''. $kk2. '</p>';        
echo '<p class="headerindex22">'. $row["object"]. '</p>    ';    
echo '<p class="locatieindex22">'. $row["wijken"]. '</p>';        
echo '<p class="descriptionindex22">'. $row["tekst"]. '</p>';        
echo '<div id="all_icon">';        
echo '<div id="pool"><img alt="" src="fotos_basic/'. $zwem2 . '" title="Zwembad"/></div>';        
echo '<div id="oppervlakte"><p class="icon">'. $woon2 . 'opp: '. $opp2 . ' m2</p></div>';        
echo '<div id="bed"><img  alt="" src="fotos_basic/bed.jpg" title="Slaapkamers" style="float:left;"/><p class="icon">&nbsp;' . $slaap2 . '</p></div>';        
echo '<div id="bad"><img  alt="" src="fotos_basic/douche.jpg" title="Badkamers" style="float:left;"/><p class="icon">&nbsp;' . $bad2 . '</p></div>';        
echo '</div></div>    ';    
echo '</div>    ';    
echo '</div>';        

$left= $left + 270;

if ($left > 710) {$left = $left - 810; $top = $top + 390;} else {}
  }
      
?>


Edit:
Ik heb code-tags geplaatst. Gelieve dit in het vervolg zelf toe te voegen aan je bericht.
Zie ook: Veel gestelde vragen: Welke UBB-codes kan ik gebruiken.
Gewijzigd op 14/08/2018 23:58:52 door - Ariën -
 
- Ariën -
Beheerder

- Ariën -

15/08/2018 00:05:02
Quote Anchor link
Als je kijkt naar je HTML-code in je browser, dan zie je halverwege onder meer een
<!DOCTYPE html> staan.

Deze mag je maak een enkele keer gebruiken in je HTML-document, en uitsluitend bovenaan. Ook je <body> zie ik hier en daar voorbij komen, en dat klopt ook niet.
Ben je al bekend met de structuur van een HTML-document?

Verder is het ook onnodig om op regel 92 t/m 111 elke regel op een echo te zetten. Je kan deze HTML prima buiten je PHP-blok plaatsen, en dan enkel de variabelen echo'en:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<div id="bad"><img alt="<?=$bad2;?>" src="fotos_basic/douche.jpg" title="Badkamers" style="float:left;"/><p class="icon">&nbsp;<?=$bad2;?></p></div>


Maar, ik snap nog steeds niet hoe en waarom je PHP wilt toepassen om je blokken op de juiste plek te zetten. Dit kan prima met CSS, of met een genoemd grid-framework. PHP weet niks van browsers af, ook niet welke resoluties deze op het huidige moment zijn.
Gewijzigd op 15/08/2018 00:06:13 door - Ariën -
 
Peter Brok

Peter Brok

15/08/2018 01:50:35
Quote Anchor link
Ik zie wat je bedoelt met regel 92 t/m 111, dat ga ik veranderen, wordt het ook overzichtelijker door.

Het <body> issue komt door de included header en contactgegevens. In die bestanden staat ook de body, nooit over nagedacht dat dat waarschijnlijk niet nodig of zelfs niet gewenst is.

Hetzelfde geldt voor het DocType. Staat er om die reden drie keer in. Ik ga dat er wel uithalen, want dat is niet nodig, besef ik nu.

En als laatste, als je een oplossing weet om met CSS de blokken op de juiste plek te zetten, dan heel graag. Want nu weet ik even niet meer hoe ik verder moet. Ik moet volgens mij toch een loop gebruiken om alles uit de database te halen. Met CSS komen volgens mij dan alle blokken op de zelfde positie te staan, toch?
 
- Ariën -
Beheerder

- Ariën -

15/08/2018 08:57:46
Quote Anchor link
Met de opbouw van je site zou ik echt een CSS grid-framework aanraden, zoals Bootstrap. Verdiep je eens daarin.

Zie ook:
https://www.w3schools.com/bootstrap/default.asp

Ik zou dan meteen Bootstrap 4 gebruiken.

En als je bestanden includeert, zorg er altijd voor dat de HTML-structuur correct blijft. Je voegt immers iets toe aan je code uit een ander bestand. Het is niet hetzelfde als (i)frames waar je een pagina embed.
Gewijzigd op 15/08/2018 09:09:03 door - Ariën -
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.