Το φόρουμ μας εξελίχθηκε σε https://kairos.snowguide.gr/
 Επισκέψου το, επέλεξε πως θες να συνδεθείς - Facebook, Twitter, Google ή Yahoo ή Github - και πες τη γνώμη σου.

Author Topic: PHP - δημιουργία ιστοσελίδας, μια πρώτη προσέγγιση - εισαγωγή  (Read 4321 times)

0 Members and 1 Guest are viewing this topic.

Offline meteoippol

  • Newbie
  • Posts: 21
  Το πρόβλημα : λειτουργία σταθμού  σε σημείο όπου δεν υπάρχει σύνδεση με το διαδίκτυο. Το πρόγραμμα cumulus σε κάθε ανανέωση ανεβάζει αρχεία όγκου ~ 550 kb . Αν υποθέσουμε ότι ανανεώνει ανά 10 λεπτά, χρειαζόμαστε  ~2,4 Gb /μήνα  (σύνδεση μέσω κινητής τηλεφωνίας).
Η λύση στην οποία έχω καταφύγει έως τώρα, είναι η περικοπή των γραφημάτων και η ανανέωση μόνο της κεντρικής σελίδας με τις τρέχουσες μετρήσεις ( http://ippokrateios-politeia.snowguide.gr/ ) , όπως και η μετάδοση των δεδομένων στο metar.gr και σε άλλα δίκτυα.

Η λύση : δημιουργία ιστοσελίδας σε περιβάλλον php. Η φιλοσοφία απλή· ο σταθμός μεταδίδει απλά τα αριθμητικά δεδομένα στον υπολογιστή που φιλοξενεί τη σελίδα , και ο τελευταίος αναλαμβάνει όλα τα υπόλοιπα, δημιουργία των σελίδων, παρουσίαση στατιστικών ΚΑΙ δημιουργία των γραφημάτων , server side.


Προαπαιτούμενα : 1) Ο υπολογιστής που φιλοξενεί την ιστοσελίδα μας ΠΡΕΠΕΙ να τρέχει php v.5 και νεώτερη 2) καλό θα ήταν (αλλά όχι απαραίτητο) να μας επιτρέπει να τρέξουμε ajax και cron jobs 3) όρεξη και χρόνος για να ασχοληθούμε.

Χωρίς προηγούμενη γνώση και ενασχόληση, και ξεκινώντας από το μηδέν, η σελίδα που παρουσιάζω "στήθηκε" σε ~10 ημέρες . Ένα από τα πρώτα προβλήματα ήταν η εύρεση server για πειραματισμό, ο οποίος πραγματικά να υποστηρίζει αυτά που προανέφερα. Δυστυχώς αρκετοί free servers κάνουν προσθήκες στο τέλος των scripts, οι οποίες έχουν σαν αποτέλεσμα τη δυσλειτουργία τους .


Σύντομη παρουσίαση

Ο σταθμός μεταδίδει στο σέρβερ 2 αρχεία, το realtime.txt μεγέθους 260 bytes  και το cutags μεγέθους 14 Kb. Απαιτούμενος όγκος δεδομένων ~ 45 Mb/ μήνα συνολικά.
Η σελίδα λειτουργεί πειραματικά στον ακόλουθο δεσμό http://meteoippol.hol.es/

Πάνω δεξιά τρέχει ένα widget σε ajax. Ενημερώνεται αυτόματα σε πραγματικό χρόνο.

Στο μενού πρόγνωση και προειδοποιήσεις εμφανίζονται αυτοματοποιημένες προγνώσεις και χάρτες από weather underground , το ewn και το meteoalarm, βάσει των συντεταγμένων και των δεδομένων του σταθμού ( http://meteoippol.hol.es/wxforecast.php  http://meteoippol.hol.es/maponlyewn.php κ.λ.π.)

Στο μενού Ημερολόγιο μπορεί κάποιος να δει γραφήματα (  http://meteoippol.hol.es/wxgraphs24.php     http://meteoippol.hol.es/wxwugraphs.php) και στατιστικά, που δημιουργούνται στο σέρβερ που μας φιλοξενεί, σε πραγματικό χρόνο.

Με το κατάλληλο ''πείραγμα'', εμφανίζονται πληροφορίες του metar.gr , τόσο στην πρώτη σελίδα όσο και εδώ http://meteoippol.hol.es/wxmetar.php

Εγκατάσταση

Εργαλεία που θα χρειαστούμε ftp client (π.χ. filezilla , winscp), και editor (π.χ. Notepad++)

1) Κατεβάζουμε από εδώ https://www.tnetweather.com/projects/downloads το script checkserver.php. Το ανεβάζουμε στο ριζικό κατάλογο του παρόχου μας και το τρέχουμε (με το φυλλομετρητή μας). Θα μας δείξει αν υποστηρίζεται php . Αν δεν υποστηρίζεται  X' πρέπει να αναζητήσουμε άλλο πάροχο.

2) Για να ξεκινήσουμε πρέπει να κατεβάσουμε τα πρότυπα (templates) που έχει δημιουργήσει o Ken True στο http://saratoga-weather.org/wxtemplates/install.php  . Διέπονται από άδεια GNU GPL. Υποστηρίζουν σχεδόν όλα τα λογισμικά (weatherlink, cumulus, wview, weather display κλπ), και υποστηρίζουν ελληνικά. Κατεβάζουμε το World template.zip και αντίστοιχο plugin για το πρόγραμμα που χρησιμοποιούμε στο σταθμό μας.

3) Αποσυμπιέζουμε τα αρχεία σε ένα φάκελο, διατηρώντας την εσωτερική δομή τους.

4) Ανοίγουμε το settings.php με το Notepad++  και κάνουμε ρυθμίσεις στις σειρές 110-119,  172 και 209 (στα zip περιέχονται επεξηγηματικά readme.txt)

5) Ανοίγουμε το settings-weather .php και πειράζουμε τις σειρές 47 και  53-55

Χρειάζεται προσοχή όταν ορίζουμε διαδρομή (path) διαφόρων αρχείων.

6) Ανεβάζουμε όλα τα αρχεία στο ριζικό κατάλογο του παρόχου μας και πληκτρολογούμε στο φυλλομετρητή μας το url  www.istoselidamoy.com/wxindex.php

Αν έχουν πάει όλα καλά θα ανοίξει η σελίδα μας (και θα αρχίσει η περιπέτεια..)

Έχοντας σαν κορμό τη σελίδα αυτή, κατεβάζουμε plugins που έχει δημιουργήσει η κοινότητα του ανοιχτού λογισμικού και την  εμπλουτίζουμε.

Από τα πρώτα που θα πρέπει να "εγκαταστήσουμε" είναι το Jpgraph της aditus http://sourceforge.net/projects/jpgraph/ , μια βιβλιοθήκη που αναλαμβάνει τη δημιουργία γραφικών server side.


Πλεονεκτήματα: πλήρως παραμετροποιήσιμη σελίδα (themes, γλώσσα, πρόσθετα αρθρώματα). Εξοικονόμηση εύρους ζώνης (bandwidth), εξαιρετικά μειωμένος όγκος δεδομένων (κέρδος και για το σταθμό αλλά και για το σέρβερ). Τα Gbytes που περισσεύουν θα μπορούσαμε να τα χρησιμοποιήσουμε για μετάδοση εικόνας. Ανοιχτό Λογισμικό. Υποστήριξη της πλειονότητας των προγραμμάτων, ανεξαρτήτως λειτουργικού. Άρτιο, νομίζω, αποτέλεσμα αισθητικά.

Μειονεκτήματα : μη αυτοματοποιημένη εγκατάσταση. Αν δεν υποστηρίζονται κάποιες λειτουργίες στο σέρβερ , δεν μπορούμε να προχωρήσουμε .

Πιστεύω ότι ο ιδανικός συνδυασμός για ένα μετεωρολογικό σταθμό, θα ήταν λειτουργικό linux + wview,  που θα τρέχει σε cubieboard/raspberryPI ή router με linux firmware,  και ιστότοπος σε php.

[ Βασιζόμενο στα Saratoga templates έχει αναπτυχθεί ένα fork, με σαφώς ποιο εύκολη εγκατάσταση και βήμα προς βήμα οδηγίες (δυστυχώς δεν υποστηρίζει ελληνικά). Θα το βρείτε εδώ http://www.weerstation-leuven.be/_template2/documentation/?lang=en και τις οδηγίες εδώ http://wiki.leuven-template.eu/doku.php?id=how_to_install  ]

Offline meteoippol

  • Newbie
  • Posts: 21
Στη σελίδα που πειραματίζομαι, πρόσθεσα αρχείο καταγραφής των εικόνων της κάμερας ανά 10λεπτο.

http://meteoippol.hol.es/wxcam-history.php

Η αρχειοθέτηση ξεκινά αυτόματα μία ώρα πριν την ανατολή και σταματά μία ώρα μετά τη δύση του ήλιου.

Στο δεσμό αυτό http://meteoippol.hol.es/wxtimelapse.php  θα δείτε timelapse των τελευταίων 48 ωρών.

Οι εικόνες και το timelapse ανανεώνονται δυναμικά αυτομάτως. Απαιτείται να έχετε καλή σύνδεση με το διαδίκτυο.

Αν κολλήσει πατήστε ανανέωση (refresh) στο πρόγραμμα πλοήγησης, και πιστεύω θα παίξει καλύτερα.

Στα καρέ, κάτω δεξιά εμφανίζονται οι συνθήκες που επικρατούν την ώρα λήψης της εικόνας

Offline MetFM

  • Hero Member
  • ****
  • Posts: 25120
  • snowguide.gr
μπορεις και μεσω του αρχειου htacsses να κανεις περαιτερω συμπιεση της ιστοσελιδας. ετσι με php και συμπιεση μεσω htacsess πετυχαινεις την μεγιστη συμπιεση. εξυπακουεται οτι εχεις κανει την μεγιστη συμπιεση των html css φωτογραφιων. υπαρχουν στο διαδικτυο ετοιμα εργαλεια γιαυτο. ο φακελος htacsess ειναι πανισχυρο εργαλειο αλλα θελει μεγαλη προσοχη γιατι αν γινει λαθος πεφτει η ιστοσελιδα. αυτα τα ολιγα με τις λιγες γνωσεις που απεκτησα κατασκευαζοντας την δικια μου σελιδα.


 πχ στην σελιδα http://ippokrateios-politeia.snowguide.gr/ εχουμε στον κωδικα 50% συμπιεση






χα χα το ψειριζω λιγο .

Offline meteoippol

  • Newbie
  • Posts: 21
Επειδή είμαι ψιλοάσχετος

1) Η συμπίεση των ιστσελίδων , πέραν της προφανούς εξοικονόμησης χώρου, συνεπάγεται και πιο "γρήγορη" προβολή της;

2)Μπήκα με filezilla στον σέρβερ και δεν εντόπισα φάκελο ή αρχείο htqcsess. Εάν το βρώ τι πρέπει να κάνω; Τα css τα συμπιέζω με κάποιο εργαλείο σαν κι αυτό που βλέπω στο στιγμιότυπο που παραθέτεις;

Offline MetFM

  • Hero Member
  • ****
  • Posts: 25120
  • snowguide.gr
1. φυσικα . υπαρχουν ετοιμα τεστ στο διαδικτυο για την ταχυτητα μιας σελιδας  πχ http://tools.pingdom.com/fpt/ , https://gtmetrix.com/ θεωρω το δευτερο πιο αξιοπιστο.

2.το αρχειο htacsess  θα το βρεις στον σερβερ που ανεβαζεις . οχι στον filezilla. ειναι κρυφο αρχειο. πχ στο net2ftp που κανει την ιδια δουλεια με τον filezzila μπορεις να το δεις. αν εχεις βεβαια. αλλα θελει πολυ προσοχη στο τι θα κανεις σε αυτο. τα αρχεια css συμπιεζονται με τον ιδιο τροπο. αρχισε πρωτα με τις συμπιεσεις της html css και αν τα αγγλικα σου ειναι καλα διαβασε και για το αρχειο htacsees στο διαδικτυο.

Offline blades

  • Administrator
  • Hero Member
  • *****
  • Posts: 22772
το αρχείο λεγεται .htaccess και εφοσον εχει τελεια μπροστα ειναι κρυφο,εμφανιζεται μονο κατ'επιλογη μεσα απο τις ρυθμισεις του filezilla
Υπομονή, οι βάρβαροι έχουν ημ.λήξης.

Offline MetFM

  • Hero Member
  • ****
  • Posts: 25120
  • snowguide.gr
ναι με μπερδευει αυτη η λεξη  .htaccess :hehehe: :hehehe: :hehehe:

Offline MetFM

  • Hero Member
  • ****
  • Posts: 25120
  • snowguide.gr
AddDefaultCharset UTF-8
Options +FollowSymLinks -MultiViews
# Turn mod_rewrite on
RewriteEngine On
RewriteBase /

RewriteCond %{QUERY_STRING} !^$
RewriteRule \.(mp3|jpe?g|gif)$ %{REQUEST_URI}? [L,R]
<IfModule mod_headers.c>
  <FilesMatch "\.(js|css|xml|gz)$">
    Header append Vary: Accept-Encoding
  </FilesMatch>
</IfModule>
<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On

ExpiresByType image/bmp "access plus 1 year"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 1 week"
</IfModule>
## EXPIRES CACHING ##


αυτος ο κωδικας μπορει να μπει οπως είναι στον φακελο .htaccess και καλύπτει την συμπίεση της σελίδας, και καλύπτει την σελίδα ως προς την cache -κρυφη μνήμη -του περιγητη ωστε να φορτωνεται γρηγορότερα η σελίδα. αν θελουμε καποιο τμήμα η φακελο της σελίδας να μην εχει cache , πχ τμηματα που ανανεωνονται συχνα οπως μια webcam-παρατηρουμε το φαινομενο αυτο στο μεταρ που βλεπουμε την ιδια εικονα , και για να δουμε την τελευταια πρεπει να κανουμε ανανεωση της σελιδας-να βλεπουμε την τελευταια εικονα. θα βαλουμε επιπλεον τον παρακατω

<Files webcam.jpg>
FileETag None
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</Files>

δηλαδη στο αρχειο webcam.jpg θα βλεπουμε παντα την πιο "φρεισκια" εκδοση. μπορουμε να βαλουμε οποιο αρχειο νομιζουμε και αν θελουμε να προσθεσουμε κι αλλο αμεσως απο κατω θα προσθεσουμε τον παραπανω κωδικα και θα βαλουμε αντι webcam.jpg το αναλογο αρχειο.
μεγαλη προσοχη με το αρχειο .htaccess στο παραμικρο λαθος η σελιδα θα πεφτει. αν γινει λαθος αν διαγραψουμε τελειως το αρχειο .htaccess απο τον σερβερ μας η σελιδα μας θα επανελθει.

Offline blades

  • Administrator
  • Hero Member
  • *****
  • Posts: 22772
Code: [Select]
ο κωδικας μπαινει ετσι
Υπομονή, οι βάρβαροι έχουν ημ.λήξης.

Offline MetFM

  • Hero Member
  • ****
  • Posts: 25120
  • snowguide.gr
μια φορα που τον ειχα βαλει ετσι , εβγαινε λαθος μετα