QR Menu and Cafe Website Script

Language note

The interface of the website and the admin panel comes in Turkish and English. You choose the site language and the panel language separately under “Site ayarları” (Site Settings), and you can also switch the panel language with the globe icon at the top right of the panel.

More languages can be added: copy the en.php file in the dil folder of the package and translate it (the steps are in dil/OKUBENI.txt). The language you add appears automatically in the language lists of the site settings, and updates do not touch your language files. Texts that are not translated appear in English; if you prefer, they can be shown in Turkish.

The content you publish (products, categories, pages, blog posts and so on) is not translated; it stays in the language you write it in. Warning messages, date formats and amount formats follow the selected language. The form e-mails sent to you are written in the panel language.

Where this page names a section of the panel or of the site, the name is given as it appears in the Turkish interface, in quotation marks, followed by its translation in parentheses; in the English interface the same sections appear under their English names.

Who it is for

Made for cafes, restaurants, patisseries and coffee shops, and for the agencies that build sites for them. Your customer scans the QR code on the table or at the door with the phone camera, and the menu, split into categories, opens on the phone with its prices. When you update the menu and the prices in the admin panel, the printed QR code opens the same menu; you only reprint the code if your site address changes.

You generate the QR codes in the panel: ready codes for the home page, the whole menu and each category can be downloaded as PNG or SVG, or printed as a table card together with your logo. The code comes with a complete cafe website: a hero slider, popular products, a blog, an About Us page, opening hours and a contact form with a KVKK consent checkbox (KVKK is Türkiye’s personal data protection law).

You do not need to know how to code. The browser wizard handles the installation, and you enter your content in the admin panel.

Scope

This script is a QR menu and cafe information website. Menu products are shown with their prices; the site has no shopping cart, online payment, online ordering, waiter call or table management. A QR code opens one menu address: you use the same menu code on all tables, and no table-specific code is generated. Category codes can be printed separately (for example a separate card for drinks). We recommend looking at the demo before you decide.

Website features

Menu page

• A menu that is easy to browse on a phone: on the menu page the categories are listed one below the other. The category strip at the top stays at the top of the screen while you scroll, scrolls sideways and marks the category you are in as you move down. Tapping a category name takes you to that section. On small screens the products appear as two-column cards; the number of columns grows as the screen gets wider.
• Category page: every category has an address that shows only its own products; the category QR code opens this page. Published products whose category was deleted or never chosen appear under “Diğer” (Other) on the full menu.
• Product card: image, product name, short description and price. Images load as the page is scrolled; a product without an image appears with a neutral icon.
• Product page: tapping the image opens a large view. The page shows the product name, a link to the category, the short description, the price, tags (for example vegan, spicy) and “Ürün Detayları” (Product Details) with rich text; below it up to four similar products from the same category are shown. A product whose status is “Taslak” (Draft) does not appear on the site.
• Prices: entered and shown in Turkish lira (₺). A product whose price is left empty or 0 is shown without a price.
• Order: you arrange categories and products with the “Sıra” (Order) field; the smaller number comes first.

Home page

• Order on the home page: hero slider, popular products, menu with category tabs, category cards and latest posts. A section with no entries does not appear.
• Hero slider: you add slides in the panel; each slide has a title, a subtitle, a button text and link, an order and an image. The button appears only if its text and its link are both filled in. With more than one slide, arrows and dot indicators work and the slides rotate by themselves. Up to ten slides are shown.
• Popular products: the products you give the “Popüler işareti” (Popular mark) are shown on the home page in a slider with name, image and price. On devices with the reduce-motion setting on, the slider does not advance by itself.
• Menu with category tabs: there is a tab for every category that has products; if you have marked popular products, the first tab is “Öne Çıkanlar” (Featured). Products are listed as cards in each tab; the “Kategoriyi aç” (Open category) and “Tüm menüyü gör” (See the whole menu) buttons lead to the menu page.
• Category cards: the category image, name and number of products are shown in a slider; tapping a card opens the menu of that category.
• Latest posts: the three newest blog posts are shown with image, date, author and short description.
• Section headings: you write the heading and the subtitle of each home page section in your own words in the panel. A heading you leave empty does not appear on the site.

Blog, pages and contact

• Blog: you publish posts with a title, category, status, author, tags, short description, image and rich text. The list is filtered with category chips; the side column of a post page shows the categories and the latest posts. A “Taslak” (Draft) post does not appear on the site.
• Extra pages: you add as many pages as you like in the panel (for example allergen information, a KVKK privacy notice, a privacy policy). For each page you choose whether it is shown in the top menu (under “Sayfalar”, Pages) and in the footer of the site.
• About Us: a business introduction page made of a title and rich text.
• Contact page: a form with name, e-mail, phone and message fields (all required); next to it the short business description, the address, a phone number that starts a call when tapped, the e-mail, the opening hours and the map (a Google Maps or OpenStreetMap embed code). Information and a map you leave empty do not appear.
• Opening hours: you enter a text for each day of the week (for example 08:00 - 22:00, or “Kapalı” (Closed) for a closed day). The text is shown to the visitor as you enter it; a day you leave empty is not shown. The hours appear on the contact page and in the footer of the site.
• E-mail to you: once you set up “E-posta ayarları” (E-mail Settings) and switch notifications on, every message from the contact form also reaches you by e-mail. When you reply to the e-mail, the reply goes to the visitor’s address. Even without e-mail settings, the messages are listed in the panel. No e-mail is sent to the visitor.
• KVKK consent checkbox: required on the contact form. The privacy notice link points to the page you choose in the panel; the same link appears in the footer of the site. The text that comes with the sample content is only a sample; you need to prepare your own privacy notice.

Appearance and search engines

• Light and dark theme: with the button in the top menu, the visitor chooses the light or the dark appearance; the choice is stored in that person’s browser.
• Main color: you choose one main color in the panel. It is applied to buttons, the background of the hero slider, active or selected items in the menu and the strips, links and prices. The text color on top of the color is chosen automatically so that it stays readable.
• Logo, site icon and footer: you upload your logo and your site icon (favicon); if you do not upload a logo, the business name appears as text. The footer holds the business description, category links, a quick menu, contact details and opening hours.
• Social media: your Facebook, X (Twitter), YouTube, Instagram and WhatsApp links appear as icons in the footer. An icon you did not fill in is not drawn.
• Switch sections on and off: you switch About Us, Blog, the contact page, the home page slider, popular products, category cards and opening hours on or off from one page. A section you switch off disappears from the menu and the home page; the address of a section that has a page does not open either.
• Footer credit: you can change or remove the “TiklaWeb tarafından geliştirildi” (Developed by TiklaWeb) text at the bottom of the site.
• Mobile friendly: the site fits phone, tablet and desktop screens; on small screens the menu becomes a panel that slides in from the side, and a “back to top” button appears when you scroll.
• Page-specific title and description: every page carries its own title (“Page | Business”), description and social sharing (Open Graph) tags. On product and blog post pages the sharing image comes from the image of the product or the post. You enter the site title, description and keywords under “Site ayarları” (Site Settings).

Admin panel

• “QR Kod” (QR Code): a separate box for the home page, the whole menu and each category: a preview, the address the code opens and download buttons. The code is downloaded as PNG in 512, 1024 and 2048 pixel sizes and as SVG. The print view for table cards comes as A6, A4 and four A6 cards on one A4 sheet (to be cut out); the card shows your logo (or the business name if there is no logo), the QR code, a line of text and the site address. You change the card text (default “Menüyü görmek için okutun”, Scan to see the menu) on the print screen.
• QR address: the codes carry the address of your site that the panel was opened from. If the address changes, you need to download and print the codes again; you can also type the address by hand and refresh the codes.
• “Özet” (Summary): the numbers of unread messages, published menu products, categories and blog posts, a shortcut to the QR Code page and the latest messages. The unread message count appears as a badge in the side menu.
• “Mesajlar” (Messages): the messages from the contact form are collected in one list. Name, phone, e-mail, date and read status appear in the list; in the detail view you read the message and the time of the KVKK consent, and you can delete the entry. The list has search and sorting.
• Menu management: for products you enter a name, category, price, order, status (published or draft), the “Popüler işareti” (Popular mark), a short description, tags, a detailed description and an image. For categories you enter a name, an order and an image. The lists have search and sorting.
• Blog and pages: blog posts, blog categories and extra pages are added, edited and deleted. The Summernote editor is used in rich text fields.
• “Site içeriği” (Site Content): home page slider, “Ana sayfa başlıkları” (Home Page Headings), “Hakkımızda” (About Us), “Çalışma saatleri” (Opening Hours), social media links and “Bölümleri aç/kapat” (Switch Sections On/Off).
• Image upload: JPG, PNG or WebP files are uploaded (up to 8 MB). If the GD extension is on, on the server the images are converted to WebP and images whose long side exceeds 1600 pixels are reduced; this way the menu that opens on a phone loads faster.
• “E-posta ayarları” (E-mail Settings): once you enter your SMTP details and switch notifications on, the contact e-mails work. You test the settings with the “Deneme e-postası gönder” (Send test e-mail) button.
• “Site ayarları” (Site Settings): site title, description and keywords, business name, phone, WhatsApp link, e-mail, address, short business description, copyright line, main color, KVKK privacy notice page, map, logo, site icon, site language and panel language.
• Users and permissions: you add administrator and editor accounts. The editor manages messages, the QR Code page and the content sections; “Site ayarları”, “E-posta ayarları” and “Kullanıcılar” (Users) are open to the administrator only. Permissions are checked on the server. Every user changes their own name and password on the “Profil ve şifre” (Profile and Password) page.
• Forgot password: the password is reset by e-mail through the link on the panel login (if “E-posta ayarları” has been set up). The reset link is valid for 1 hour and can be used once.
• Custom code: under “Site ayarları” you add your own code (for example an analytics script) to the head of the site, the start of its body and the end of the page. These fields are open to the administrator only.

Setup and updates

• Five-step setup wizard: requirements, license, database, site and administrator details, finish. The wizard checks your server itself.
• Setup language: Turkish or English is chosen at the top right of the wizard. With an English setup, the starting and sample content also come in English.
• Setup with sample content or empty: you can start full like the demo and edit it, or enter the content from scratch. The “Mesajlar” (Messages) list starts empty in both cases.
• Update from the panel: you download the zip package of the new version from your tiklaweb.net customer panel and upload it on the “Güncelleme ve lisans” (Update and License) page of the admin panel. A file and database backup is taken before the operation. If an error occurs, the site returns to its previous state. The images you uploaded, your settings and your content are preserved.
• Verified packages: the signature of the update package is checked; only packages downloaded from tiklaweb.net are installed.

The detailed setup guide comes in the package you download as the KURULUM.html file (written in Turkish).

License

Each license is for a single domain name that you give when you order. A domain name change is a paid service and is handled through a support request. The license is not transferred free of charge. The site does not open on an unlicensed domain name, and the visitor is redirected to a license warning page. You need a separate license to use it on another domain name.

Technical specifications

• PHP 8.2 or higher, MySQL or MariaDB
• Foundation: plain PHP, PDO and prepared statements. Site: Bootstrap 5, jQuery, Slick, Font Awesome Free 6; the font (Raleway) is stored locally in the package and no external font service is called. Panel: Bootstrap 4, DataTables and the Summernote content editor
• The QR codes are generated on your server with the MIT and Apache-2.0 licensed chillerlan/php-qrcode library; no request goes to an external QR service. The PNG file is written without the GD extension
• Only your site’s own addresses are written into the QR codes; a site address you type by hand is carried with signed links
• E-mail is sent with PHPMailer 6.9; the SMTP password is stored encrypted. The form entry is written to the database first; if the server supports it, the e-mail is sent after the visitor has been answered
• Interface texts are kept in the language files of the package (Turkish and English ready, new languages can be added)
• Signed form token and hidden trap field on the contact form, CSRF verification on panel actions; attempt limits on panel login, password reset and the contact form
• The type of images uploaded in the panel is verified from content (JPG, PNG, WebP; up to 8 MB); PHP does not run in the upload folder
• The rich text fields of the panel are filtered on the server when saved (HTMLPurifier); the admin panel sends a Content Security Policy (CSP) header; administrator passwords are stored hashed
• The map field accepts only Google Maps and OpenStreetMap embed addresses
• Database details and backups are kept in a folder outside the web root if the hosting allows
• Security headers, HSTS on HTTPS; time zone Europe/Istanbul
• A security audit made of a code review and live attack tests was carried out before sale

Demo

You can explore the site and the admin panel in a read-only demo. The demo is installed in Turkish; in the admin panel you can switch the panel language to English with the globe icon at the top right (this choice is kept only in your browser). The business name, products, prices, posts and photos in the demo are all sample content. In the demo panel you can open the “QR Kod” (QR Code) page, download the codes and try the table card view; the codes carry the address of the demo site. In the “Mesajlar” (Messages) list you see a few sample entries. WhatsApp, social media links and the map are left empty in the demo; they appear on the site once you fill them in the panel.

• Site: https://018.tiklaweb.net
• Admin panel: https://018.tiklaweb.net/admin
• Demo e-mail: demo@tiklaweb.net
• Demo password: demo1234

Changes cannot be saved in the demo; the contact form does not record entries and does not send e-mail. The demo is reset every night. Sensitive pages such as e-mail settings, users and password forms cannot be viewed in demo mode, and “Forgot password” is off in the demo. These login details are only for the demo site. In the installation you buy, you set the administrator account yourself.

Support

If you get stuck, you can open a support request from your tiklaweb.net customer panel or write to destek@tiklaweb.net.