How to modify magento front end pages - php

Question

I am trying to create a module which has both frontend and backend functionality. Like I need to ask for the city in the home page when the store loads. And all the available cities are entered/managed in backend admin panel.
Before I used to write for only backend things, frontend seems little confusing.
There is a design folder which is completely for theme development.
All the example are little different(https://www.mageplaza.com/magento-2-module-development/,http://inchoo.net/magento-2/how-to-create-a-basic-module-in-magento-2/]2), they have routes.xml, where route_id, and all are defined, but here I don't need any extra route. Need some additional tweaks in frontend pages.
I created module V_name/M_name/adminhtml/block controllers etc view ...
Guide me how to create a module, which has both front end and backend connection, cities should be entered in admin, they should show on the frontend homepage.
For now, I only managed to edit home page content CMS page by adding some HTML which shows a popup with a dropdown for cities when the page loads.

Answer 1

Since you already have the back-end figured out I will focus on front-end. Also, since all you need to do is populate a list that you already have created this should be easy. I did something like this before and I found it easier to just use JSON to query a list of, in your case the cities, and populate the drop down. I don't believe this is the most 'MVP/proper' way to go, but it is less work then the other ways. (At least for me it is. I always prefer the JavaScript option since it allows for easy future page customization.)
To use the JSON method you need to create a Block with a method like the one below. You will see that you will also have to create a Resource Model (I'm not going to go over creating the Resource Model or the details of Blocks since there are much better resources than me already online that will go into every single detail you need.). Once this is complete you can access the data straight from the .phtml page in an easy to use JSON array.
First you need to make sure you are now structuring your Modules properly. The new Block below should be in a structure like this...
app/code/<VENDOR>/<MODULE>/Block/Wrapper.php (or whatever you name it)
The admin Blocks should be in the structure below, which it sounds like you are already know how to do.
app/code/<VENDOR>/<MODULE>/Block/Adminhtml
Create your Block and add a method to create a JOSN array like below...
public function getCityList()
{
$city_array = array();
/** #var \<VENDOR>\<MODULE>\Model\ResourceModel\City\Collection $collection */
$collection = $this->_cityCollectionFactory->create();
$collection->addFieldToFilter('active','1')->addFieldToSelect(['city_id', 'city']);
$collection->getSelect()->order(array('city ASC', 'city_id ASC'));
$count = 0;
foreach ($collection as $model)
{
$city_array["$count"] = $model->getData();
$count++;
}
return \Zend_Json::encode($city_array);
}
FYI... The foreach loop in the code above is weird and uses $count because I needed to do some tricky things to get something to work.
Then you can create the Block in your .phtml file to access the data via javascript.
<?php
$block_obj = $block->getLayout()->createBlock('<VENDOR>\<MODULE>\Block\Wrapper');
?>
<script type="text/javascript">
window.citylistJson = <?php echo $block_obj->getCityList() ?>;
</script>