How/Where to override Magento 2 order page?

Question

I'm very new to development in Magento so I would appreciate someone just pointing me in the right direction.

I would like to make a few modifications to the functionality of the default Magento 2 orders page. For example, adding a "Cancel Order" button. I found the place in the core code where this page is being displayed. So the extract below is from vendor\magento\module-sales\view\frontend\templates\order\history.phtml

<tbody>
            <?php foreach ($_orders as $_order): ?>
                <tr>
                    <td data-th="<?= $block->escapeHtml(__('Order #')) ?>" class="col id"><?= /* @escapeNotVerified */ $_order->getRealOrderId() ?></td>
                    <td data-th="<?= $block->escapeHtml(__('Date')) ?>" class="col date"><?= /* @escapeNotVerified */ $block->formatDate($_order->getCreatedAt()) ?></td>
                    <?php $extra = $block->getChildBlock('extra.container'); ?>
                    <?php if ($extra): ?>
                        <?php $extra->setOrder($_order); ?>
                        <?= /* @noEscape */ $extra->getChildHtml() ?>
                    <?php endif; ?>
                    <td data-th="<?= $block->escapeHtml(__('Ship To')) ?>" class="col shipping"><?= $_order->getShippingAddress() ? $block->escapeHtml($_order->getShippingAddress()->getName()) : '&nbsp;' ?></td>
                    <td data-th="<?= $block->escapeHtml(__('Order Total')) ?>" class="col total"><?= /* @escapeNotVerified */ $_order->formatPrice($_order->getGrandTotal()) ?></td>
                    <td data-th="<?= $block->escapeHtml(__('Status')) ?>" class="col status"><?= /* @escapeNotVerified */ $_order->getStatusLabel() ?></td>
                    <td data-th="<?= $block->escapeHtml(__('Actions')) ?>" class="col actions">
                        <a href="<?= /* @escapeNotVerified */ $block->getViewUrl($_order) ?>" class="action view">
                            <span><?= /* @escapeNotVerified */ __('View Order') ?></span>
                        </a>
                        <?php if ($this->helper('Magento\Sales\Helper\Reorder')->canReorder($_order->getEntityId())) : ?>
                            <a href="#" data-post='<?php /* @escapeNotVerified */ echo
                            $this->helper(\Magento\Framework\Data\Helper\PostHelper::class)
                                ->getPostData($block->getReorderUrl($_order))
                            ?>' class="action order">
                                <span><?= /* @escapeNotVerified */ __('Reorder') ?></span>
                            </a>
                        <?php endif ?>
                    </td>
                </tr>
            <?php endforeach; ?>
        </tbody>

The problem is I know it's a bad idea to make direct changes to this code, would I need to create a new theme or a new module to overwrite this file?

I am quite overwhelmed by the system so far, if I read through the Magento 2 PHP Development documentation will that be enough to grasp what is needed to be done or are there extra resources that I can consume? I'm just trying to figure out the best way to learn Magento 2 Development.

Answer 1

Copy the original template into your theme folder and make the changes you need. Theme templates override the default module templates.

The location for your file should be

 app/design/frontend/[THEME_VENDOR]/[THEME_NAME]/Magento_Sales/templates/order/history.phtml

Answer 2

Welcome to Magento2 , its really solid and complete ecommerce solution out there, you will enjoy more as you go on.

so lets, coming to your question. To override any adminhtml template best approach is you should create an adminhtml theme and copy desired file in your admin theme ( following module directory structure.

You can check magento dev docs Admin theme links that how to implement that solution and this question answer how to override admin template. It will help you to know how to create theme and override template.